webpack从0到1超详细超基础学习教程

概念

自己是一个一听到webpack就头大，看着一堆不知道那是什么玩意的东西总觉得自己做好前端就行了，但是在使用vue-cli的时候总觉得要改其中的一些东西进行项目初始化的时候能够更好使用！所以想要根据官方文档进行一个webpack的教程，写这些主要还是为了进行一个系统的学习，帮助在webpack的道路上迷茫的同学们。

在进行webpack的学习之前，第一步就是要让大家认识一下webpack中四个核心的概念。

四个核心概念

1. 入口（entry）

相信这个字面意思大家都没有问题，这个就是指定webpack的入口文件，指定其从什么地方开始。找到这个起始点，再从起始点出发来看依赖的文件，每个依赖都将被处理，最后输出。

示例：

// webpack.config.js
module.exports = {
    entry: './src/index.js'
}

上述代码以及入口是简单的配置，是一个简单的单入口，是一种简写方式，具体的多入口配置方式如下。

示例：

// webpack.config.js
module.exports = {
    entry: {
        fistpage: './src/index.js',
        nextpage: './src/next.js',
        lastpage: './src/last.js',
    }
}

2. 输出（output）

有入口就肯定有出口，这里自然就是定义文件输出的位置，以及输出文件的名字和目录，和入口一样，你可以定义一个output段来配置文件的输出。

当然，输出的文件入口指定一个就可以了，区分的只是文件的名字即可，因此在这里只给大家介绍一种，输入时候的名字是什么，则输出的文件名字就是什么即可，只需要改filename为[name].js。

示例：

// webpack.config.js
const path = require('path')
module.exports={
    entry: './src/index.js',
    output: {
        path: path.resolve(_dirname, 'dist'),
        filename: 'first-webpack.js'
    }
};

解释一下上述代码，首先我们先倒入一个nodejs一个操作文件路径的核心模块path，然后使用path进行文件路径操作，将生成的文件存放在dist目录，生成的文件名字为first-webpack.js。

3. loader

webpack本身只能够理解一些js文件，但是loader可以做到让其去处理一些非js文件，比如我们的css文件，图片文件，loader可以将这些文件转换成webpack能够处理的有效模块，所以因为它的存在，你import导入进来任何类型模块。

示例：

// webpack.config.js
const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(_dirname, 'dist'),
        filename: 'first-webpack.js'
    },
    module: {
        rules: [
            {test: /\.txt$/, use: 'raw-loader'}
        ]
    }
}

以上，在配置loader的时候，要新建一个module的对象，在其对象中来定义rules属性，里面存在两个必要的属性，test和use，其中

1. test表示要使用loader进行转换的一个或者一些文件，在这里是指被导入的模块的后缀名为.txt文件
2. use则表示对于被导入的此类的文件，我们会使用raw-loader转换一下，在进行打包

注：一定要注意此项配置是在module对象下的rules下进行配置

这里再做一个演示，比如我们平时在项目中使用css，但是前面也说了在webpack中可能不会识别css，因此这里要使用loader加载css文件，但是首先要安装对应的loader进行加载css文件，这里使用css-loader，安装命令

npm install --save-dev css-loader

然后在webpack中要配置，指定css文件使用css-loader加载

module.exports = {
    rules: [
        {test: /\.css$/, use: 'css-loader'}
    ]
}

还有其它的方式可以使用，作用是相同的，就是使用内联或者cli

4. 插件（plugins）

loader是用来转换某些类型的模块，而插件则用来去执行更广的任务，这个功能非常强大，可以用来处理各种任务。当然，使用方法也是很简单，直接将npm安装的插件通过require引入进来即可，然后在配置文件中将其添加进plugins数组中，也可以自定义，当然也可以一个插件使用其不同的功能多次使用，但是相应的你要new一个实例。

示例：

// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(_dirname,'dist'),
        filename: 'first-webpack.js'
    },
    module: {
        rules: [
            {test: /\.txt$/, use: 'raw-loader'}
        ]
    },
    plugins: [
        new webpack.optimize.UgifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
}

配置

当然，除了上述四个核心概念，这里还有一个配置，你可以配置不同的模式来进行webpack内置优化，可以选择development或者production，配置不同的mode对应着不同的文件以及plugins插件进行相应的模式优化。

module.exports = {
    mode: 'development'
}

模块

想必大家肯定知道js或者自己熟悉的一些模块，但是到底什么是webpack模块相比还是比较陌生，webpack模块主要的作用就是能够使用各种方式表达自己和其他模块的依赖关系。

比如：

1. import语句
2. require()语句
3. 样式文件的@import语句
4. url或者src的一些链接

可支持基本上各种模块，比如我们ts，sass以及less文件等，允许各种技术使用webpack进行，在webpack中对于模块的路径有三种形式。

1. 绝对路径：import "/home/src/file"
2. 相对路径：import "./file"
3. 模块路径：import "module"，这个特别说明一下，这里的模块将会在resolve.modules指定目录进行搜索

webpack还有一个重要的环节，就是依赖图，在webpack中，一个文件依赖另一个文件，就称为这两个文件有着依赖关系，所以在用图像资源的时候，我们可以为图像与文件中间建立依赖关系，这样在打包文件的时候，就能够将图片资源也能够打包，可以使用import和require将图片打包进来

这些用来我们入门webpack已经足够了，当然webpack不仅仅是这些，还有着很多更高级的用法，但是这里仅仅是webpack的一个入门，让大家能够知道webpack的一些具体的作用，如果大家还想了解webpack的其他内容，可以在下面留言，如果大家需要我会再出一个大家需要的教程，谢谢！