关于webpack:Webpack-源码分析2-Tapable-与-Webpack-的关联

文章首发于我的博客 https://github.com/mcuking/bl…

接着上文 Webpack 源码剖析（1）—— Webpack 启动过程剖析 咱们接下来持续剖析 webpack 的构建流程。

上文结尾处咱们提到了 webpack-cli 最终还是调用了 webpack 提供的 webpack 函数，取得了 compiler 实例对象。那么咱们就从新回到 webpack 包查看下这个 webpack 函数，webpack 函数所在文件是 node_module\webpack\lib\webpack.js。上面是其中的要害代码：

const Compiler = require("./Compiler");
...
const webpack = (options, callback) => {
    ...
    let compiler;
    if (Array.isArray(options)) {
        compiler = new MultiCompiler(Array.from(options).map(options => webpack(options))
        );
    } else if (typeof options === "object") {options = new WebpackOptionsDefaulter().process(options);

        compiler = new Compiler(options.context);
        compiler.options = options;
        ...
        if (options.plugins && Array.isArray(options.plugins)) {for (const plugin of options.plugins) {if (typeof plugin === "function") {plugin.call(compiler, compiler);
                } else {plugin.apply(compiler);
                }
            }
        }
        compiler.hooks.environment.call();
        compiler.hooks.afterEnvironment.call();
        compiler.options = new WebpackOptionsApply().process(options, compiler);
    } else {throw new Error("Invalid argument: options");
    }
    if (callback) {
        ...
        compiler.run(callback);
    }
    return compiler;
}

有下面的代码咱们能够看到 webpack 函数是通过引入了内部定义好的 Compiler 类，并基于接管到的 options 初始化了一个实例对象（如果 options 是数组，则遍历数组中每个 option，别离初始化 compiler 实例对象），最初调用了 compiler 实例上的 run 办法（如果是 watch 模式则调用 watch 办法）。

不过在调用 run 办法之前，还有一些逻辑是对 options 的 plugins 属性做了一些解决以及调用 compiler 下面的 hooks 的一些办法。为了搞清楚这里的原理，咱们须要认真理解下 Compiler 这个类的定义，该类在 node_module\webpack\lib\Compiler 文件中。要害代码如下：

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

class Compiler extends Tapable {constructor(context) {super();
        this.hooks = {shouldEmit: new SyncBailHook(["compilation"]),
            done: new AsyncSeriesHook(["stats"]),
            ...
        },
        ...
    }

    watch(watchOptions, handler) { }

    run(callback) { }

    ...

    emitAssets(compilation, callback) { }

    ...

    createCompilation() {return new Compilation(this);
    }

    newCompilation(params) { }
    
    ...

    compile(callback) {}}

到这里咱们理解到 Compiler 类继承了 Tapable 类，而 Tapable 类又是从 webpack 开源的 tapable 包中引入的，那么接下来就须要弄清 tapable 这个包的作用了。

对于 tapable 的外部源码咱们就不去剖析了，而是采纳另一种思路，通过查问 tapable 仓库的文档和相干材料，参考 webpack 中应用 Tapable 的形式，用代码实现一个相似的 demo。

Tapable 是什么

Tapable 是一个相似 NodeJS 的 EventEmitter 的库，次要通过钩子函数的公布与订阅来实现 webpack 的插件零碎。

Tapable 的根本应用

Tapable 裸露进去的都是类办法，能够通过 new 一个类办法来取得咱们须要的钩子。

那么咱们看下 Tapable 裸露进去的 Hook（钩子）类都有哪些，总共 9 种：

const {
    SyncHook,
    SyncBailHook,
    SyncWaterfallHook,
    SyncLoopHook,
    AsyncParallelHook,
    AsyncParallelBailHook,
    AsyncSeriesHook,
    AsyncSeriesBailHook,
    AsyncSeriesWaterfallHook,
} = require("tapable")

不难发现，其中有很多公共的局部，其实这九种钩子都是继承了上面列表中的根底钩子类：

具体是通过钩子的绑定和执行来应用的，如下图：

上面是 hook 应用示例代码：

const hook1 = new SyncHook(["arg1", "arg2"])

// 绑定事件
hook1.tap('hook1', (arg1, arg2) => console.log(arg1, arg2));

// 执行绑定的事件
hook1.call(1, 2);

模仿 Webpack 应用 Tapable 形式

源码请参考 https://github.com/mcuking/bl…

咱们首先依照源码的形式实现一个简略的 Compiler 类，并设置两个钩子 compile（同步钩子）和 emit（异步串行钩子）。

const {SyncHook, AsyncSeriesHook} = require('tapable');

class Compiler {constructor() {super();

    this.hooks = {compile: new SyncHook(),
      emit: new AsyncSeriesHook()};
  }

  run() {this.compile();
    this.emit();}

  compile() {this.hooks.compile.call();
  }

  emit() {this.hooks.emit.callAsync(() => {});
  }
}

module.exports = Compiler;

而后咱们在调用 Compiler 实例对象的 run 办法时，执行刚刚两个钩子 compile 和 emit。接下来咱们实现一个插件 myPlugin，也是依照类的模式来实现的。

class MyPlugin {constructor() {}

  apply(compiler) {compiler.hooks.compile.tap('OfflinePackagePlugin', () => {console.log('compiling...');
    });

    compiler.hooks.emit.tapAsync('OfflinePackagePlugin', callback => {console.log('start generating offline package...');
      setTimeout(() => {console.log('generate offline package successfully');
        callback();}, 4000);
    });
  }
}

module.exports = MyPlugin;

插件中 apply 办法接管了 Compiler 实例对象，并调用了实例上的两个 hook（钩子）的绑定办法。

而后再 index.js 文件中将 Compiler 和 MyPlugin 联合起来，如下：

/**
 * 模仿 webpack 应用 tapable 形式，* 用来演示 webpack 外部插件运行机制
 */

const Compiler = require('./Compiler');

const MyPlugin = require('./myPlugin');

const myPlugin = new MyPlugin();

const options = {plugins: [myPlugin]
};

const compiler = new Compiler();

for (const plugin of options.plugins) {if (typeof plugin === 'function') {plugin.call(compiler, compiler);
  } else {plugin.apply(compiler);
  }
}

compiler.run();

即初始化了一个 Compiler 实例对象，而后初始化了 options 外面的插件（传入 Compiler 的实例对象），其实就是将插件外面的要执行的业务逻辑绑定到 Compiler 实例的 hook（钩子）上，最初执行 Compiler 实例对象的 run 办法，触发相应的 hook（钩子），从而触发绑定到 hook（钩子）上的办法的执行，实质上就是公布订阅模式。

到这里咱们就曾经把握了 webpack 是如何利用 tapable 来实现整个插件机制的，下篇文章咱们将真正开始对 webpack 的构建流程进行解析。