webpack的钩子函数

最新推荐文章于 2025-05-12 16:21:28 发布

每天都在掉头发

最新推荐文章于 2025-05-12 16:21:28 发布

阅读量1.6k

点赞数 1

分类专栏： webpack 文章标签： json

本文链接：https://blog.youkuaiyun.com/ABCFF12333/article/details/118906392

版权

webpack 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了webpack的编译流程中包括done、beforeRun、run、emit、afterEmit、compilation、beforeCompile、compile和make等关键钩子函数的执行时机，帮助开发者理解webpack的内部工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const { SyncHook, SyncBailHook, AsyncSeriesHook } = require("tapable");
class Compiler {
  constructor() {
    // 1. 定义生命周期钩子
    this.hooks = Object.freeze({
      // ...只列举几个常用的常见钩子，更多hook就不列举了，有兴趣看源码
      done: new AsyncSeriesHook(["stats"]),//一次编译完成后执行，回调参数：stats
      beforeRun: new AsyncSeriesHook(["compiler"]),
      run: new AsyncSeriesHook(["compiler"]),//在编译器开始读取记录前执行
      emit: new AsyncSeriesHook(["compilation"]),//在生成文件到output目录之前执行，回调参数： compilation
      afterEmit: new AsyncSeriesHook(["compilation"]),//在生成文件到output目录之后执行
      compilation: new SyncHook(["compilation", "params"]),//在一次compilation创建后执行插件
      beforeCompile: new AsyncSeriesHook(["params"]),
      compile: new SyncHook(["params"]),//在一个新的compilation创建之前执行
      make:new AsyncParallelHook(["compilation"]),//完成一次编译之前执行
      afterCompile: new AsyncSeriesHook(["compilation"]),
      watchRun: new AsyncSeriesHook(["compiler"]),
      failed: new SyncHook(["error"]),
      watchClose: new SyncHook([]),
      afterPlugins: new SyncHook(["compiler"]),
      entryOption: new SyncBailHook(["context", "entry"])
    });
    // ...省略代码
  }

done: 编译完成后
beforeRun: 在编译器执行前
run: 在编译器开始读取记录前执行
emit: 文件提交到dist目录前
afterEmit: 文件提交到dist目录前
compilation: 创建compilation后
beforeCompile: 在编译前
compile: 创建compilation前
make:编译完成前