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,**所以这两个你怎么都得记住了吧

相关推荐
小桥风满袖1 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang1 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793081 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
李重楼1 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu1 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin1 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者1 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
brzhang1 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构
lecepin2 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒2 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端