webpack 的生命周期/钩子/hooks有哪些，plugin 能用的生命周期

> 面试官问我，你知道 webpack plugin 的原理是啥么，

- 我巴拉巴拉说一堆，我说是监听 webpack 的各种生命周期执行，执行一些不同的逻辑。

> 然后又问？你写过 plugin  么，怎么实现的

- 我说写过，有个 apply 方法啥的

> 然后又问，webpack 的生命周期都有哪些？

- 我支支吾吾，露馅了，生命周期一个都没记住啊，服了！

plugin 实现原理，请参考这篇文章。

下面是 webpack 的生命周期，挑几个眼熟的记住吧，具体请看官方文档。我的建议是记住常用的plugin 对应的生命周期

根据不同阶段总结一下，以及不同阶段对应的插件：

1. 初始化阶段（Initialization）：

   • environment: 在创建 webpack 实例的时候触发，用来读取 webpack 配置和设置环境。
   • entry-option: 在设置入口点（entry）和选项（options）之后触发，但在开始读取模块和加载插件之前。

2. 编译阶段（Compilation）：

   • before-run: 在开始编译之前触发，异步钩子【CleanWebpackPlugin】。
   • run: 在读取记录和模块之前触发，异步钩子。
   • normal-module-factory: 创建模块之前触发。
   • context-module-factory: 创建模块上下文之前触发。
   • before-compile: 编译器开始编译之前触发。
   • compile: 编译器开始编译时触发。

3. 构建阶段（Build）：

   • this-compilation: 编译器开始重新编译时触发。
   • compilation: 编译器创建新的编译实例时触发【DefinePlugin，HotModuleReplacementPlugin，ProvidePlugin】。
   • make: 当编译创建开始之前触发。
   • after-compile: 编译完成时触发。

4. 优化阶段（Optimization）：

   • optimize: 在执行优化（optimization）和插件应用之前触发。【OptimizeCSSAssetsPlugin，terser-webpack-plugin，css-minimizer-webpack-plugin，uglifyjs-webpack-plugin】
   • optimize-modules: 在模块优化之前触发。【OptimizeModulesPlugin】
   • optimize-chunks: 在块优化之前触发。【OptimizeChunksPlugin】
   • optimize-chunk-assets: 在块资产优化之前触发。【OptimizeChunkAssetsPlugin】

5. 产出阶段（Output）：

   • before-emit: 在生成资源到 output 目录之前触发。
   • emit: 在生成资源到 output 目录之后触发。【MiniCssExtractPlugin，HtmlWebpackPlugin，inline-chunk-html-plugin，CopyWebpackPlugin】
   • after-emit: 在生成资源到 output 目录之后触发。

6. 完成阶段（Completion）：

   • done: 编译完成后触发，包括成功和失败的情况【webpack-bundle-analyzer】。
   • failed: 编译失败时触发。
   • invalid: 监视模式下，编译无效时触发。
   • watch-run: 在监视模式下，在每次重新编译之前触发。

你会发现，常用的插件的生命周期一般都是 optimize 优化和 emit，所以这两个你怎么都得记住了吧