tapable 钩子总结

• AsyncSeriesHook
  • AsyncSeriesBailHook
  • AsyncSeriesLoopHook
  • AsyncSeriesWaterfallHook
• AsyncParallelHook
  • AsyncParallelBailHook
• SyncHook
  • SyncBailHook
  • SyncLoopHook
  • SyncWaterfallHook

Waterfall

A waterfall hook also calls each tapped function in a row. Unlike the basic hook, it passes a return value from each function to the next function.

将上个钩子的返回传入下个函数

Bail

A bail hook allows exiting early. When any of the tapped function returns anything, the bail hook will stop executing the remaining ones.

Bail钩子允许提前退出。当任何被tap的函数返回任何内容时，Bail钩子将停止执行剩余的函数。

Loop

When a plugin in a loop hook returns a non-undefined value the hook will restart from the first plugin. It will loop until all plugins return undefined.

当循环钩子中的插件返回非未定义值时，钩子将从第一个插件重新启动。它将循环直到所有插件都返回 undefined。

Sync类型

只能被tap调用

AsyncSeries

An async-series hook can be tapped with synchronous, callback-based and promise-based functions (using myHook.tap(), myHook.tapAsync() and myHook.tapPromise()). They call each async method in a row.

异步系列钩子可以使用同步的、基于回调的和基于Promise的函数（使用 myHook.tap()、myHook.tapAsync() 和 myHook.tapPromise()）。他们连续调用每个异步方法。

AsyncParallel

异步并行钩子可以使用同步的、基于回调的和基于Promise的函数（使用 myHook.tap()、myHook.tapAsync() 和 myHook.tapPromise()）。他们连续调用每个异步方法。

代码解释

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


// ['name', 'age']是调用参数，需要在hook.call('张三', 18)时传入
const hook = new SyncHook(['name', 'age']); 


hook.tap('hello0', (name, age) => {
  //hook.call('张三', 18);调用传入的参数可以在这里拿到 
    console.log(`hello ${name}-my age is ${age}`);
});
// 调用时传入 实参
hook.call('张三', 18);

tapPromise

当我们用 tapPromise 方法来绑定插件时，_必须_返回一个 pormise ，异步任务完成后 resolve 。

class HelloAsyncPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapPromise('HelloAsyncPlugin', (compilation) => {
      // 返回一个 pormise ，异步任务完成后 resolve
      return new Promise((resolve, reject) => {
        setTimeout(function () {
          console.log('异步任务完成...');
          resolve();
        }, 1000);
      });
    });
  }
}

module.exports = HelloAsyncPlugin;

tapAsync

class HelloAsyncPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync(
      'HelloAsyncPlugin',
      (compilation, callback) => {
        // 执行某些异步操作...
        setTimeout(function () {
          console.log('异步任务完成...');
          callback();
        }, 1000);
      }
    );
  }
}

module.exports = HelloAsyncPlugin;