探究 Webpack 之 Tapable-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一款强大的前端打包工具，其核心原理是将多个模块打包成一个或多个文件，以便于浏览器加载。而 Tapable 则是 Webpack 中的一个重要概念，它是一个插件系统，可以让开发者在 Webpack 的各个阶段添加自定义的逻辑。

Tapable 的基本使用

在 Webpack 中，我们可以通过 Tapable 来添加自定义的插件。Tapable 是一个类，我们可以通过实例化它来使用它的方法。下面是一个简单的例子，演示了如何使用 Tapable 在 Webpack 打包过程中添加自定义的插件：

// javascriptcn.com 代码示例
const { SyncHook } = require('tapable');

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('MyPlugin', () => {
      console.log('Webpack 打包完成');
    });
  }
}

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new MyPlugin(),
  ],
};

在上面的例子中，我们新建了一个 MyPlugin 类，它实现了 Tapable 的 apply 方法，该方法在 Webpack 打包过程中会被调用。在 apply 方法中，我们通过调用 compiler.hooks.done.tap 方法来添加一个 done 钩子的监听器，该监听器会在 Webpack 打包完成后被执行。

Tapable 的基本原理

Tapable 的实现原理非常简单，它主要是通过发布订阅模式来实现的。在 Tapable 中，我们可以通过调用 hook.tap 方法来添加一个监听器，该监听器会在 hook 触发时被执行。而 hook 触发的时机则取决于具体的实现，比如 SyncHook 会在所有监听器都被执行完毕后再执行下一步操作，而 AsyncParallelHook 则会在所有监听器都被执行完毕后立即执行下一步操作。

Tapable 的类型

在 Tapable 中，有多种类型的 hook，不同类型的 hook 在触发时机和参数传递方式上有所不同。下面是一些常用的 hook 类型：

SyncHook

SyncHook 是最简单的 hook 类型，它只能同步执行监听器，不能传递参数。下面是一个例子：

// javascriptcn.com 代码示例
const { SyncHook } = require('tapable');

const hook = new SyncHook();

hook.tap('MyPlugin', () => {
  console.log('Hello, world!');
});

hook.call();

在上面的例子中，我们创建了一个 SyncHook 实例，然后通过调用 tap 方法添加一个监听器。最后我们调用 call 方法来触发 hook，这时监听器会被依次执行。

SyncBailHook

SyncBailHook 类型的 hook 与 SyncHook 类型的 hook 类似，但是它可以在监听器中返回一个非 undefined 的值，这时后续的监听器就不会被执行了。下面是一个例子：

// javascriptcn.com 代码示例
const { SyncBailHook } = require('tapable');

const hook = new SyncBailHook();

hook.tap('MyPlugin', () => {
  console.log('Hello, world!');
});

hook.tap('MyPlugin', () => {
  return 'Stop!';
});

hook.tap('MyPlugin', () => {
  console.log('This will not be executed');
});

hook.call();

在上面的例子中，我们创建了一个 SyncBailHook 实例，并添加了三个监听器。第二个监听器返回了一个非 undefined 的值，因此第三个监听器就不会被执行了。

SyncWaterfallHook

SyncWaterfallHook 类型的 hook 与 SyncBailHook 类型的 hook 类似，但是它可以将一个监听器的返回值传递给下一个监听器。下面是一个例子：

// javascriptcn.com 代码示例
const { SyncWaterfallHook } = require('tapable');

const hook = new SyncWaterfallHook(['name']);

hook.tap('MyPlugin', (name) => {
  console.log(`Hello, ${name}!`);
  return 'world';
});

hook.tap('MyPlugin', (name) => {
  console.log(`Goodbye, ${name}!`);
});

hook.call('Tom');

在上面的例子中，我们创建了一个 SyncWaterfallHook 实例，并添加了两个监听器。第一个监听器返回了一个字符串，这个字符串会传递给第二个监听器。

SyncLoopHook

SyncLoopHook 类型的 hook 可以用来实现循环监听器。在监听器中返回 true 会让 Webpack 重新执行该监听器，返回 false 则会停止执行该监听器。下面是一个例子：

// javascriptcn.com 代码示例
const { SyncLoopHook } = require('tapable');

const hook = new SyncLoopHook(['name']);

let count = 0;

hook.tap('MyPlugin', (name) => {
  console.log(`Hello, ${name}!`);
  count++;
  if (count < 3) {
    return true;
  }
});

hook.call('Tom');

在上面的例子中，我们创建了一个 SyncLoopHook 实例，并添加了一个监听器。这个监听器会在 Webpack 执行它三次后停止执行。

AsyncParallelHook

AsyncParallelHook 类型的 hook 可以用来实现并行监听器。在监听器中调用 callback 会让 Webpack 执行下一个监听器。下面是一个例子：

// javascriptcn.com 代码示例
const { AsyncParallelHook } = require('tapable');

const hook = new AsyncParallelHook(['name']);

hook.tapAsync('MyPlugin', (name, callback) => {
  setTimeout(() => {
    console.log(`Hello, ${name}!`);
    callback();
  }, 1000);
});

hook.tapAsync('MyPlugin', (name, callback) => {
  setTimeout(() => {
    console.log(`Goodbye, ${name}!`);
    callback();
  }, 500);
});

hook.callAsync('Tom', () => {
  console.log('All done!');
});

在上面的例子中，我们创建了一个 AsyncParallelHook 实例，并添加了两个异步监听器。这些监听器会在不同的时间执行，并且会在所有监听器执行完成后执行回调函数。

AsyncSeriesHook

AsyncSeriesHook 类型的 hook 可以用来实现串行监听器。在监听器中调用 callback 会让 Webpack 执行下一个监听器。下面是一个例子：

// javascriptcn.com 代码示例
const { AsyncSeriesHook } = require('tapable');

const hook = new AsyncSeriesHook(['name']);

hook.tapAsync('MyPlugin', (name, callback) => {
  setTimeout(() => {
    console.log(`Hello, ${name}!`);
    callback();
  }, 1000);
});

hook.tapAsync('MyPlugin', (name, callback) => {
  setTimeout(() => {
    console.log(`Goodbye, ${name}!`);
    callback();
  }, 500);
});

hook.callAsync('Tom', () => {
  console.log('All done!');
});

在上面的例子中，我们创建了一个 AsyncSeriesHook 实例，并添加了两个异步监听器。这些监听器会按照添加的顺序依次执行，并且会在所有监听器执行完成后执行回调函数。

总结

Tapable 是 Webpack 中非常重要的一个概念，它可以让我们在 Webpack 的各个阶段添加自定义的逻辑。Tapable 的实现原理非常简单，它主要是通过发布订阅模式来实现的。在 Tapable 中，有多种类型的 hook，不同类型的 hook 在触发时机和参数传递方式上有所不同。在实际开发中，我们可以根据需求选择不同类型的 hook 来实现自己的插件。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6563176ad2f5e1655dcc8a89