webpack-编译原理

webpack 编译过程

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

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

初始化

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

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

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

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

编译

创建 chunk

chunk 是 webpack 在内部构建过程中的一个概念，译为块，它表示通过某个入口找到的所有依赖的统称。

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

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

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

构建所有依赖模块

AST在线测试工具：https://astexplorer.net/

简图

产生 chunk assets

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

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

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

简图

合并 chunk assets

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

输出

此步骤非常简单，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 开始的数字进行编号。
  nk 的名称，如果没有配置则使用 main。

• id

  通常指 chunk 的唯一编号，如果在开发环境下构建，和 chunkname 相同；如果是生产环境下构建，则使用一个从 0 开始的数字进行编号。