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

相关推荐
musk12127 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css