构建流程

核心概念

在了解 Webpack 原理前,需要掌握以下几个核心概念,以方便后面的理解:

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

工作流程

Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:

  1. 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数
  2. 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译
  3. 确定入口:根据配置中的 entry 找出所有的入口文件
  4. 编译模块:从入口文件出发,调用所有配置的 loader 对模块进行翻译,再找出该模块依赖的模块,再 递归 本步骤直到所有入口依赖的文件都经过了本步骤的处理
  5. 完成模块编译:在经过第 4 步使用 loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的 依赖关系图
  6. 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会
  7. 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统

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

流程细节

Webpack 的构建流程可以分为以下三大阶段:

  1. 初始化:启动构建,读取与合并配置参数,加载 plugin,实例化 Compiler。
  2. 编译:从 entry 出发,针对每个 module 串行调用对应的 loader 去翻译文件内容,再找到该 module 依赖的 module,递归地进行编译处理。
  3. 输出:对编译后的 module 组合成 Chunk,把 Chunk 转换成文件,输出到文件系统。

如果只执行一次构建,以上阶段将会按照顺序各执行一次。但在开启监听模式下,流程将变为如下:

初始化 => 编译 => 输出 => 文件发生变化 => 编译 => ...

在每个大阶段中又会发生很多事件,Webpack 会把这些事件广播出来供给 Plugin 使用。

Webpack 的编译都按照下面的钩子调用顺序执行:

  • entry-option(初始化 option)
  • run(开始编译)
  • make(从 entry 开始递归的分析依赖,对每个依赖模块进行 build)
  • before-resolve(对模块位置进行解析)
  • build-module(开始构建某个模块)
  • normal-module-loader(将 loader 加载完成的 module 进行编译,生成 AST 树)
  • program(遍历 AST,当遇到 require 等一些调用表达式时,收集依赖)
  • seal(所有依赖 build 完成,开始优化)
  • emit(输出到 dist 目录)

初始化阶段

事件名说明
初始化参数从配置文件和 Shell 语句中读取与合并参数,得出最终的参数。 这个过程中还会执行配置文件中的插件实例化语句  new xxxPlugin()
实例化 Compiler用上一步得到的参数初始化  Compiler  实例,Compiler  负责文件监听启动编译Compiler  实例中包含了完整的  Webpack  配置,全局只有一个  Compiler  实例。
加载插件依次调用插件的 apply 方法,让插件可以监听后续的所有事件节点。同时给插件传入 compiler 实例的引用,以方便插件通过 compiler 调用 Webpack 提供的 API。
environment开始应用 Node.js 风格的文件系统到 compiler 对象,以方便后续的文件寻找和读取。
entry-option读取配置的  entrys,为每个  entry  实例化一个对应的  EntryPlugin,为后面该  entry  的递归解析工作做准备。
after-plugins调用完所有内置的和配置的插件的  apply  方法。
after-resolvers根据配置初始化完  resolverresolver  负责在文件系统中寻找指定路径的文件。

编译阶段

事件名说明
run启动一次新的编译。
watch-run和  run  类似,区别在于它是在监听模式下启动的编译,在这个事件中可以获取到是哪些文件发生了变化导致重新启动一次新的编译。
compile该事件是为了告诉插件一次新的编译将要启动,同时会给插件带上  compiler  对象。
compilation当  Webpack  以开发模式运行时,每当检测到文件变化,一次新的  Compilation  将被创建。一个  Compilation  对象包含了当前的模块资源、编译生成资源、变化的文件等。Compilation  对象也提供了很多事件回调供插件做扩展。
make一个新的  Compilation  创建完毕,即将从  Entry  开始读取文件,根据文件类型和配置的  Loader  对文件进行编译,编译完后再找出该文件依赖的文件,递归的编译和解析。
after-compile一次  Compilation  执行完成。
invalid当遇到文件不存在、文件编译错误等异常时会触发该事件,该事件不会导致 Webpack 退出。

在编译阶段中,最重要的要数 Compilation 事件了,因为在 Ccompilation 阶段调用了 Loader 完成了每个模块的转换操作,在 Compilation  阶段又包括很多小的事件,它们分别是:

事件名说明
build-module使用对应的 Loader 去转换一个模块。
normal-module-loader在用 Loader 对一个模块转换完后,使用  acorn  解析转换后的内容,输出对应的抽象语法树(AST),以方便 Webpack 后面对代码的分析。
program从配置的入口模块开始,分析其 AST,当遇到 require 等导入其它模块语句时,便将其加入到依赖的模块列表,同时对新找出的依赖模块递归分析,最终搞清所有模块的依赖关系。
seal所有模块及其依赖的模块都通过 Loader 转换完成后,根据依赖关系开始生成 Chunk。

输出阶段

事件名说明
should-emit所有需要输出的文件已经生成好,询问插件哪些文件需要输出,哪些不需要。
emit确定好要输出哪些文件后,执行文件输出,可以在这里获取和修改输出内容。
after-emit文件输出完毕。
done成功完成一次完成的编译和输出流程。
failed如果在编译和输出流程中遇到异常导致 Webpack 退出时,就会直接跳转到本步骤,插件可以在本事件中获取到具体的错误原因。

参考资料