一、初识Webpack
Webpack是一个模块打包器，它可以把多个零散的模块打包成一个文件，通过模块打包的方式，实现JS、CSS、图像等资源的依赖管理和按需加载。Webpack可以支持commonJS和ES6等模块化规范。相对于其他打包工具，Webpack具有更强的灵活性和可扩展性，它的核心思想就是将所有的静态资源都视作模块。
二、Webpack基本概念
在学习Webpack的过程中，我们需要掌握下列几个基本概念：
- Entry：Webpack的入口文件，可以是一个或多个文件。
- Output：Webpack输出目录和文件名。
- Loader：Webpack默认只能识别JS文件，因此需要使用Loader将非JS类的文件转换为Webpack能够识别的模块。
- Plugin：Plugin用于扩展Webpack的功能，包括优化资源管理、资源压缩、自定义模板等。
- Chunk：Chunk是Webpack打包时最小的单位，由一组代码和一组依赖组成。
- Module：Module是Webpack的基本单元，包含代码、依赖以及Loader和Plugin。
三、Webpack构建流程
Webpack的构建流程可以分为以下几个步骤：
1. 解析配置参数
Webpack会从配置文件中读取相关配置参数，包括Entry、Output、Module、Plugin等，并对配置参数进行解析。
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
2. 依赖解析
Webpack会对Entry中指定的入口文件进行依赖分析，分析出所有的依赖关系，包括直接依赖和间接依赖。
// index.js
import { sum } from './sum.js';
console.log(sum(1, 2));
// sum.js
export function sum(a, b) {
return a + b;
}
以上面的代码为例，对于index.js文件，它依赖了sum.js文件，因此Webpack会从sum.js文件中分析出sum函数，进而将其作为index.js文件的依赖。
3. 编译模块
Webpack会将每个模块转换为运行在浏览器上的代码，这个过程主要是将开发者使用的代码转换为浏览器可以识别的代码，同时会将各个模块进行打包。
// index.js
const sum = require('./sum.js');
console.log(sum(1, 2));
// sum.js
function sum(a, b) {
return a + b;
}
module.exports = sum;
4. 生成Chunk
在经过依赖分析和模块编译之后，Webpack会生成多个Chunk，并且每个Chunk都包含若干个模块。生成Chunk的过程中，Webpack还会针对不同的资源类型做一些特殊处理，例如将CSS文件转换为style标签等。
5. 输出文件
Webpack最终将生成的Chunk输出到指定的目录中，整个构建流程也就完成了。
四、常见插件和Loader
Webpack有很多的插件和Loader可以使用，插件可以扩展Webpack的功能，而Loader可以将各种类型的文件转换成Webpack可以处理的模块。
1. 常见插件
- HtmlWebpackPlugin：用于将js文件插入到HTML模板中，自动生成HTML文件。
- MiniCssExtractPlugin：用于提取CSS代码，将其打包成独立的文件。
- UglifyWebpackPlugin：用于压缩JS代码。
- CopyWebpackPlugin：用于将某些文件或目录复制到构建目录中。
2. 常见Loader
- babel-loader：用于将ES6及以上的代码转换为ES5。
- style-loader/css-loader：用于处理CSS文件，将其转换为JS代码，再将其注入到HTML中。
- file-loader/url-loader：用于处理图片文件，可以将图片文件转换为base64编码或者单独生成文件。
