【webpack核心】- 7、webpack 编译过程

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

整个过程大致分为三个步骤：

1. 初始化
2. 编译
3. 输出
   

1、初始化–融合CLI参数、配置文件、默认配置

此阶段，webpack会将CLI参数、配置文件、默认配置进行融合，形成一个最终的配置对象。

对配置的处理过程是依托一个第三方库yargs完成的

此阶段相对比较简单，主要是为接下来的编译阶段做必要的准备

目前，可以简单的理解为，初始化阶段主要用于产生一个最终的配置

2、编译–生成总的资源列表

1、创建chunk - 根据入口模块创建一个chunk

chunk是webpack在内部构建过程中的一个概念，译为块，它表示通过某个入口找到的所有依赖的统称 ，eg：通过入口文件./src/index.js 找到依赖./src/a.js 又找到./src/b.js， 这3个模块统称为一个chunk。

根据入口模块（默认为./src/index.js）创建一个chunk

每个chunk都有至少两个属性：

• name：默认为main
• id：唯一编号，开发环境和name相同，生产环境是一个数字，从0开始
  每一个chunk都有名字的，这意味着chunk有可能有多个的；

2、构建所有依赖模块 -生成模块列表（模块id：转换后代码）

• 这个编译的过程，不会运行模块里的代码，只是读取文件内容，记录成表格
• AST抽象语法树–树形结构遍历，找到所有依赖，以数组的形式["./src/a.js","./src/b.js"]存到dependencies里
• 替换依赖函数，eg：把require("./a") 改成_webpack_require("./src/a.js")，我们改动后的代码叫转换后的代码–字符串格式
• 通过找依赖，最终形成chunk中模块记录表格，里面存了所有模块id(模块路径)和模块转换后的代码
  AST在线测试工具
  简图
  在chunk中生成多个模块，每个模块包含了模块id和模块转换后的代码

3、产生chunk assets - 根据模块列表生成文件列表

在第二步完成后，chunk中会产生一个模块列表，列表中包含了模块id和模块转换后的代码

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

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

简图

• 通过入口创建一个chunk
• 编译出模块列表（所有依赖的模块id:转换后的代码）
• 根据模块列表 生成文件列表（资源列表）–bundle(捆)，可以认为资源列表中每一个资源就是一个bundle

4、合并chunk assets

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

多个入口就有多个chunk

3、输出emit

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

总过程

涉及术语

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

打包结果解读

如上图：

• hash–最终的资源列表内容生成的hash
• version–webpack版本
• Time–构建时间
• 表格里：
  asset – 资源，下面的项时资源列表里的每个资源项
  size–资源大小
  chunks – chunk id ，开发环境下id 和 名字一样都是main
  chunk Name – chunk名称
• Entrypoint 表示入口， Entrypoint main 这个main 表示入口的chunk 的名字， = 等号右边是 输出
  
• 递归加载了2个模块，这是构建过程中依次加载的模块

---

注意：如果开启了watch–监控文件变化，每次文件变化后从2阶段–编译 开始重新走，不会再初始化了