webpack 执行过程

在弄清楚执行流程前，有几个概念需要弄清楚：

  • Entry：入口
  • Module：模块。在 webpack 中，一切文件都是模块
  • Chunk：代码块。一个 Chunk 由多个 Module 组合而成，用于代码的合并和分割。
  • Loader：模块转换器。用于把模块的原内容按需转换成新内容。
  • Plugin：插件。在 webpack 的构建过程中会广播出对应的时间，插件可以监听这些事件做一些操作。

webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

  1. 初始化参数：从配置文件和 shell 语句中读取并合并参数，得出最终的参数
  2. 开始编译：从上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始编译
  3. 确定入口：根据配置中的 entry 确定所有的入口文件
  4. 编译模块：从 entry 出发，调用所有配置的 loader 对 module 进行翻译，再找出模块依赖的模块，递归到所有入口依赖的文件都经过本步骤的处理
  5. 完成模块编译：使用 loader 翻译所有 module 后，得到每 module 被翻译后的最终内容及其依赖关系
  6. 输出资源：根据 entry 和 module 之间的依赖关系，组装成一个包含多个 module 的 chunk，再把每个 chunk 转换成一个单独的文件加入输出列表
  7. 输出完成：确定 output 的路径和文件名。将文件写入到文件系统。

笼统的讲，大概分为以下几个步骤：

  1. 初始化参数：合并参数
  2. 根据参数初始化 Compiler 对象，加载所有的插件
  3. 确定入口文件，加载所有配置的 loader 翻译模块，得到每个模块的最终内容和依赖关系
  4. 根据入口文件和模块之间的依赖关系，组装成 chunk，并将 chunk 转换成一个单独的文件
  5. 确定输出路径和文件名，输出打包后的文件。

上述步骤大致可分为三个阶段：（可以理解为 webpack 的生命周期）

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

image.png