webpack 生命周期

概念：webpack 工作流中最核心的两个模块 Compiler Compilation 都扩展与 Tapable 类，用于实现工作流中的生命周期的划分，以便在不同的生命周期注册和调用插件，所以暴露出各个生命周期的节点称为Hook。（俗称钩子函数）

webpack 插件

webpack 插件是一个包含apply方法的 js 类。这个apply方法 通常是注册 webpack 中某一个生命周期的 hook，并添加对应的处理函数。

Hook 的使用方式：

1.在 Compiler 构造函数中定义参数和类型，生成 hook 对象。

2.在插件中注册 hook，添加对应 Hook 触发时的执行函数。

3.生成插件实例，运行 apply 方法。

4.在运行到对应生命周期节点时调用 Hook，执行注册过的插件的回调函数。

Compiler Hooks

构建器实例的生命周期可以分为 3 个阶段：初始化阶段、构建过程阶段、产物生成阶段。

初始化阶段

environment、afterEnvironment：在创建完 compiler 实例且执行了配置内定义的插件的 apply 方法后触发。

entryOption、afterPlugins、afterResolvers：在 WebpackOptionsApply.js 中，这 3 个 Hooks 分别在执行 EntryOptions 插件和其他 Webpack 内置插件，以及解析了 resolver 配置后触发。

构建过程阶段

normalModuleFactory、contextModuleFactory：在两类模块工厂创建后触发。

beforeRun、run、watchRun、beforeCompile、compile、thisCompilation、compilation、make、afterCompile：在运行构建过程中触发。

产物生成阶段

shouldEmit、emit、assetEmitted、afterEmit：在构建完成后，处理产物的过程中触发。

failed、done：在达到最终结果状态时触发。