webpack打包是一种事件流的机制，它的原理是将各个插件串联起来，那么实现这一切的核心就是我们要讲解的tapable. 并且在webpack中负责编译的Compiler和负责创建bundles的Compilation都是tapable构造函数的实列
基于 "webpack": "^4.43.0",这个版本的包的。安装该webpack之后，该webpack会自带 tapable 包。在tapable包下它是由如下js文件组成的。
Tapable的本质是能控制一系列注册事件之间的执行流的机制。钩子分为同步和异步
理解Sync 类型的钩子
SyncHook.js是处理串行同步执行的文件，在触发事件之后，会按照事件注册的先后顺序执行所有的事件处理函数。
const { SyncHook } = require('tapable');
// 创建实列
const syncHook = new SyncHook(["name", "age"]);
// 注册事件
syncHook.tap("1", (name, age) => {
console.log("1", name, age);
});
syncHook.tap("2", (name, age) => {
console.log("2", name, age);
});
syncHook.tap("3", (name, age) => {
console.log("3", name, age);
});
// 触发事件，让监听函数执行
syncHook.call("kongzhiEvent-1", 18);
SyncBailHook.js同样为串行同步执行，如果事件处理函数执行时有一个返回值不为空。则跳过剩下未执行的事件处理函数。
SyncWaterfallHook 为串行同步执行，上一个事件处理函数的返回值作为参数传递给下一个事件处理函数，依次类推。
SyncLoopHook 为串行同步执行，事件处理函数返回true表示继续循环，如果返回undefined的话，表示结束循环。
理解Async类型的钩子
Async类型可以使用tap, tapSync 和 tapPromise 注册不同类型的插件钩子，我们分别可以通过 call, callAsync， promise 方法调用。
