webpack4核心模块tapable源码解析

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 方法调用。

参考连接

webpack4核心模块tapable源码解析