webpack原理系列-tapable用法(SyncHook篇)

webpack原理

Webpack本质基于事件流，流程就是将各个插件串联执行，实现此功能的核心就是tapable，webpack中负责编译的Compiler是基于tapable实现。

tapable

• 建立各类钩子
• 插件将本身的方法注册到对应钩子上，交给webpack
• webpack编译时,会适时地触发相应钩子，所以也就触发了tapable的方法

tabable api以下

SyncHook,
  SyncBailHook,
  SyncWaterfallHook,
  SyncLoopHook,
  AsyncParallelHook,
  AsyncParallelBailHook,
  AsyncSeriesHook,
  AsyncSeriesBailHook,
  AsyncSeriesWaterfallHook
复制代码

SyncHook 基本使用

let { SyncHook } = require('tapable');
//触发此事件需传入name参数，而后监听函数能够获取name参数
let hooks = new SyncHook(["name", "age"]);
//注册监听
hooks.tap("a", function (name, age) {
  console.log(name, age,'a');
});
hooks.tap("b", function (name, age) {
  console.log(name, age,'b');
  // 返回值无效
  return 'error'
});
hooks.tap("c", function (name, age) {
  console.log(name, age,'c');
});
// 触发事件
hooks.call("测试"); 
复制代码

打印结果：

测试 100 a
测试 100 b
测试 100 c
复制代码

SyncHook 实现原理 既然能够new，说明就是一个类,实现比较简单，代码定义以下：

class SyncHook {
constructor() {
  this.hooks = [];
}
tap(name, fn) {
  this.hooks.push(fn);
}
call() {
  this.hooks.forEach((hook) => hook(...arguments));
}
}
复制代码