3. webpack构建（编译）流程

引用webpack官网的一张图

webpack的作用就是将各种类型的资源，转换为JS格式的bundle文件，并交给浏览器处理。

实现这个需求的过程需要经历三个阶段

• 初始化
• 编译（构建、打包）
• 输出

初始化

该阶段将读取所有配置信息（命令行、配置文件）并合并成一个最终的配置文件。

接着会实例化Complier对象。Complier负责文件监听和启动编译。

该过程中会使用到第三方库yargs

编译（构建、打包）

概念

• dependence：依赖对象
• chunk：webpack内部构建模块的块，一个chunk中包含多个模块，这些模块都是从入口模块通过依赖分析得来的。
• module：模块，可以将js代码分解成单独的文件，便于维护。（不限于js，图片也可以是module）

创建chunk

通过入口文件，分析整个依赖关系，创建一个chunk，每个chunk都有自己的名字

每个chunk至少有两个属性

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

构建所有依赖模块

• 入口 --检查记录-->
• 已记录则结束，未记录则继续 ->
• 读取文件内容（调用loader） --语法分析-->
• AST抽象语法树 --记录依赖-->
• 保存到dependencies中 ->
• 替换依赖函数 ->
• 保存转换后的模块代码

chunk中会产生一个模块列表，列表中包含了模块id（即路径 './src/a.js' ）和模块转换后的代码

生成资源列表（chunk assets）

接下来 webpack 会根据配置为chunk生成一个资源列表，即chunk assets，资源列表可以理解为是生成到最终文件的文件名和文件内容。

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

合并chunk assets

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

输出

webpack利用node的fs模块，根据编译产生的总的assets，生成相应的文件