10天掌握webpack 4.0 tapable （1) SyncHook 的使用

const {
  SyncHook
} = require("tapable");
//所有的钩子构造函数, 都接受一个可选的参数, (这个参数最好是数组, 不是tapable内部也把他变成数组), 这是一个参数的字符串名字列表
//const hook = new SyncHook(["arg1", "arg2", "arg3"]);
class lession {
  constructor() {
    //最好的实践就是把所有的钩子暴露在一个类的hooks属性里面:
    this.hooks = {
      arch: new SyncHook(["name"]),
    }
  }
  // 注册监听函数
  tap() {
    this.hooks.arch.tap('node', function (name) {
      console.log('node', name)
    })
    this.hooks.arch.tap('vue', function (name) {
      console.log('vue', name)
    })
    this.hooks.arch.tap('react', function (name) {
      console.log('react', name)
    })
  }
  start() {
    this.hooks.arch.call('jw');
  }
}
let ls = new lession();
//注册
ls.tap()
//启动
ls.start()

我们先声明一个类 类里面有一个构造函数 ，一个 注册监听函数 tap , 一个start 启动 函数

new SyncHook  接受一个可选的参数, (这个参数最好是数组

new SyncHook(["name"]),

 

tap 监听函数 这个函数主要作用是将 两个方法 添加到一个数组 中 

start 函数 触发绑定tap 里面的 事件

调用call 会让两个方法依次执行