> 面试官问我，你知道 webpack plugin 的原理是啥么，
- 我巴拉巴拉说一堆，我说是监听 webpack 的各种生命周期执行，执行一些不同的逻辑。
> 然后又问？你写过 plugin 么，怎么实现的
- 我说写过，有个 apply 方法啥的
> 然后又问，webpack 的生命周期都有哪些？
- 我支支吾吾，露馅了，生命周期一个都没记住啊，服了！
plugin 实现原理，请参考这篇文章。
下面是 webpack 的生命周期，挑几个眼熟的记住吧，具体请看官方文档。我的建议是记住常用的plugin 对应的生命周期
根据不同阶段总结一下，以及不同阶段对应的插件：
-
初始化阶段（Initialization）：
environment: 在创建 webpack 实例的时候触发，用来读取 webpack 配置和设置环境。entry-option: 在设置入口点（entry）和选项（options）之后触发，但在开始读取模块和加载插件之前。
-
编译阶段（Compilation）：
before-run: 在开始编译之前触发，异步钩子【CleanWebpackPlugin】。run: 在读取记录和模块之前触发，异步钩子。normal-module-factory: 创建模块之前触发。context-module-factory: 创建模块上下文之前触发。before-compile: 编译器开始编译之前触发。compile: 编译器开始编译时触发。
-
构建阶段（Build）：
this-compilation: 编译器开始重新编译时触发。compilation: 编译器创建新的编译实例时触发【DefinePlugin **，**HotModuleReplacementPlugin，ProvidePlugin 】。make: 当编译创建开始之前触发。after-compile: 编译完成时触发。
-
优化阶段（Optimization）：
optimize: 在执行优化（optimization）和插件应用之前触发。【OptimizeCSSAssetsPlugin，terser-webpack-plugin，css-minimizer-webpack-plugin，uglifyjs-webpack-plugin】optimize-modules: 在模块优化之前触发。【OptimizeModulesPlugin】optimize-chunks: 在块优化之前触发。【OptimizeChunksPlugin】optimize-chunk-assets: 在块资产优化之前触发。【OptimizeChunkAssetsPlugin】
-
产出阶段（Output）：
before-emit: 在生成资源到 output 目录之前触发。emit: 在生成资源到 output 目录之后触发。【MiniCssExtractPlugin，HtmlWebpackPlugin，inline-chunk-html-plugin，CopyWebpackPlugin】after-emit: 在生成资源到 output 目录之后触发。
-
完成阶段（Completion）：
done: 编译完成后触发，包括成功和失败的情况【webpack-bundle-analyzer】 。failed: 编译失败时触发。invalid: 监视模式下，编译无效时触发。watch-run: 在监视模式下，在每次重新编译之前触发。