淺析webpack源碼之Tapable粗解（五）

Arno 發(fā)布于2019-08-23 14:45 / 2832人閱讀

摘要：打開是個構(gòu)造函數(shù)，定義了一些靜態(tài)屬性和方法我們先看在插件下地址上面寫的解釋就跟沒寫一樣在文件下我們看到輸出的一些對象方法每一個對應(yīng)一個模塊而在下引入的下面，我們先研究引入的對象的英文單詞解釋，除了最常用的點擊手勢之外，還有一個意思是水龍頭進

打開compile

class Compiler extends Tapable {
    constructor(context) {
        super();
            this.hooks = {
                //...
            }
    }
}

Compiler是個構(gòu)造函數(shù)，定義了一些靜態(tài)屬性和方法

我們先看 Tapable

Tapable在node_modules插件下
git地址
上面寫的解釋Just a little module for plugins就跟沒寫一樣

在lib/index.js 文件下

exports.__esModule = true;
exports.Tapable = require("./Tapable");
exports.SyncHook = require("./SyncHook");
exports.SyncBailHook = require("./SyncBailHook");
exports.SyncWaterfallHook = require("./SyncWaterfallHook");
exports.SyncLoopHook = require("./SyncLoopHook");
exports.AsyncParallelHook = require("./AsyncParallelHook");
exports.AsyncParallelBailHook = require("./AsyncParallelBailHook");
exports.AsyncSeriesHook = require("./AsyncSeriesHook");
exports.AsyncSeriesBailHook = require("./AsyncSeriesBailHook");
exports.AsyncSeriesWaterfallHook = require("./AsyncSeriesWaterfallHook");
exports.HookMap = require("./HookMap");
exports.MultiHook = require("./MultiHook");

我們看到輸出的一些對象方法

每一個對應(yīng)一個模塊

而在webpakck Compiler.js下引入的下面

const {
    Tapable,
    SyncHook,
    SyncBailHook,
    AsyncParallelHook,
    AsyncSeriesHook
} = require("tapable");

so，我們先研究引入的對象

tap 的英文單詞解釋，除了最常用的點擊手勢之外，還有一個意思是水龍頭

進一步可以理解為tapable是管理事件流的意思

借用網(wǎng)上的一張圖，tapable是事件管家
之所以名稱有差距，是版本問題導(dǎo)致的，目前的是1.1.0版本，我們看看git果然證明了v0.2.8以前的全部都是下圖函數(shù)所示