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源碼解析