深入剖析 Tapable：Webpack 的事件机制

前端

2023-10-02 05:30:33

Tapable 学习笔记

Tapable 是 Webpack 中事件机制的基石，它提供了一套易于使用的 API，用于注册和执行各种钩子。钩子是允许插件和加载器在特定时刻插入自定义逻辑的回调函数。

同步钩子

Tapable 提供了三种同步钩子类型：

tap ：注册一个同步钩子，当钩子被调用时，注册的回调函数将立即被执行。
tapSync ：同上，但显式指定钩子类型为同步。
tapSeries ：注册一个同步串行钩子，当钩子被调用时，注册的回调函数将按注册顺序依次执行。

异步钩子

类似地，Tapable 也提供了三种异步钩子类型：

tapAsync ：注册一个异步钩子，当钩子被调用时，注册的回调函数将以异步方式执行，并接受一个回调函数作为最后一个参数。
tapPromise ：注册一个基于 Promise 的异步钩子，当钩子被调用时，注册的回调函数将返回一个 Promise。
tapParallel ：注册一个异步并行钩子，当钩子被调用时，注册的回调函数将同时执行。

注册和执行钩子

要注册一个钩子，可以使用 tap 或 tapAsync 等方法，并提供一个回调函数。

compiler.hooks.emit.tap('MyPlugin', (compilation) => {
  // 在编译过程中发出资产时触发的回调函数
});

要执行一个钩子，可以使用 call 或 callAsync 等方法。

compiler.hooks.emit.call(compilation);

示例：一个简单的插件

让我们编写一个简单的 Webpack 插件，该插件会在编译完成后记录一条信息。

const { SyncHook } = require('tapable');

class MyPlugin {
  constructor() {
    // 创建一个同步钩子
    this.hooks = {
      done: new SyncHook(['stats']),
    };
  }

  apply(compiler) {
    // 注册 done 钩子
    compiler.hooks.done.tap('MyPlugin', (stats) => {
      console.log('编译完成！');
    });
  }
}

module.exports = MyPlugin;