浅析webpack源码之Tapable粗解（五）

打开compile

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

Compiler是个构造函数，定义了一些静态属性和方法

我们先看 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");

我们看到输出的一些对象方法

每一个对应一个模块

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

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

so，我们先研究引入的对象

tap 的英文单词解释，除了最常用的 点击 手势之外，还有一个意思是 水龙头

进一步可以理解为tapable是管理事件流的意思

借用网上的一张图，tapable是事件管家
之所以名称有差距，是版本问题导致的，目前的是1.1.0版本，我们看看git果然证明了v0.2.8以前的全部都是下图函数所示