webpack学习 - 编译过程

1.webpack的编译过程

webpack的作用是将源代码编译（构建、打包）成最终代码

1.初始化

此阶段，webpack会将cli参数】配置文件、默认配置进行融合，形成一个最终的配置对象。
对配置对象的处理过程依赖的是一个第三方库yargs完成的。
此阶段相对比较简单，主要为接下来的编译阶段做必要的准备

目前，可以简单的理解为，初始化阶段主要用于产生一个最终的配置
初始化阶段的代码是需要运行的，因为要生成一个最终的配置

2.编译

2.1.创建chunk（块）

chunk是webpack在内部构建过程中的一个概念，译为块，它表示通过某个入口找到的所有依赖的统称
根据入口模块（默认为./src/index.js）创建一个chunk
每个chunk都至少有两个属性：

• name：默认为main
• id：唯一编号，开发环境和name相同，生产环境是一个数字，从0开始

2.2.构建所有依赖模块

// index.js的内容
console.log('index')
require("./a.js")
require("./b.js")

// a.js的内容
console.log('aaa')
require("./b.js")

// b.js的内容
console.log('bbbb')

• 1.首先检查入口模块文件，这里是index.js，检查是否被记录，已记录则结束，未记录则继续，
• 2.然后读取文件内容，
• 3.进行AST抽象语法树分析，找到所有依赖
• 4.记录依赖，保存到dependencies中
• 5.替换依赖函数（会将原来的代码变为转换后的代码）
• 6.保存转换后的模块代码，
• 7.记录在chunk中，记录的内容必须有模块id，转换后的代码，路径从相对路径变为绝对路径。
• 8.根据dependencies的内容递归加载
  因为index.js中依赖了两个模块a.js和b.js，所以再次对a.js和b.js进行模块文件分析，这是一个遍历的过程，直到所有的模块都被分析完，

2.3.产生chunk assets

在第二步完成后，chunk会产生一个模块列表，列表中包含了模块id和模块转换后的代码
接下来，webpack会根据配置为chunk生成一个资源列表，即chunk assets，资源列表可以理解为是生成到最终文件的文件名和文件内容

文件名：./dist/main.js

文件内容：
（function (modules){
}）({
	"./src/index.js":function(xxx){
		eval("console.log("index"))
		__webpack_require("./src/a.js")
		__webpack_require("./src/b.js")
	}
})

chunk hash是根据所有chunk assets的内容生成的一个hash字符串
hash：一种算法，具体有很多分类，特点是将一个任意长度的字符串转换为一个固定长度的字符串，而且可以保持原始内容不变，产生的hash字符串就不变

2.4.合并chunk assets

将多个chunk的assets合并到一起，并产生一个总的hash

3.输出

此步骤非常简单，webpack将利用node中的fs模块（文件处理模块），根据编译产生的总的assets，生成相应的文件。

总过程

涉及术语

module：模块，分割的代码单元，webpack中的模块可以是任何内容的文件，不仅限于JS
chunk：webpack内部构建模块的块，一个chunk中包含多个模块，这些模块是从入口模块通过依赖分析得来的
bundle：chunk构建好模块后会生成chunk的资源清单，清单中的每一项就是一个bundle，可以认为bundle就是最终生成的文件
hash：最终的资源清单所有内容联合生成的hash值
chunkhash：chunk生成的资源清单内容联合生成的hash值
chunkname：chunk的名称，如果没有配置则使用main
id：通常指chunk的唯一编号，如果在开发环境下构建，和chunkname相同；如果是生产环境下构建，则使用一个从0开始的数字进行编号