工作原理概括

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-02-26

基本概念

  • Entry：入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入。
  • Module：模块，在 Webpack里一切皆模块，一个模块对应一个文件。Webpack 会从配置的Entry开始，递归找出所有依赖的模块。
  • Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。
  • Loader：模块转换器，用于将模块的原内容按照需求转换成新内容。
  • Plugin：扩展插件，在 Webpack构建流程中的特定时机会广播对应的事件，插件可以监听这些事件的发生，在特定的时机做对应的事情。

流程概括

  1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数。

  2. 开始编译：用上一步得到的参数初始化 Compiler对象，加载所有配置的插件，通过执行对象的run方法开始执行编译。

  3. 确定入口：根据配置中的Entry找出所有入口文件。

  4. 编译模块：从入口文件触发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。

  5. 完成模块编译：在经过第4步使用 Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容及它们之间的依赖关系。

  6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，再将每个chunk转换成一个单独的文件加入输出列表中，这是可以修改输出的最后机会。

  7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件内容写入文件系统中。

在以上的过程中，Webpack会在特定的时间点广播特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack提供的 API改变的 Webpack的运行结果。

流程细节

Webpack的构建流程可以分为以下三大阶段：初始化、编译阶段、输出阶段；

初始化

启动构建，读取与合并配置参数，加载Plugin，实例化Complier。

该阶段会发生的事件及解释如下：

初始化阶段

编译阶段

从Entry 发出，针对每个Module 串行调用对应的Loader 去翻译文件的内容，再找到该Module依赖的Module ，递归地进行编译处理。

该阶段会发生的事件及解释如下：

编译阶段

在编译阶段中，最重要的事件是compilation ，因为在compilation 阶段调用了Loader,完成了每个模块的转换操作。在compilation 阶段又会发生很多小事件，如下。

compilation阶段

输出阶段

输出：将编译后的 Module 组合成 Chunk，将Chunk 转换成文件，输出到文件系统中。

该阶段会发生的事件及解释如下：

输出阶段

在输出阶段己经得到了各个模块经过转换后的结果和其依赖关系，并且将相关模块组合在一起形成一个个Chunk 。在输出阶段会根据Chunk 的类型，使用对应的模板生成最终要要输出的文件内容。