返回

Webpack之Tapable源码解读

前端

引言

Webpack作为前端构建工具的领军者，凭借其强大的功能和丰富的插件生态，在前端开发领域广受欢迎。Webpack的核心之一便是Tapable，它提供了一套灵活的钩子系统，允许插件在Webpack构建的不同阶段注入自定义逻辑。通过Tapable，插件可以监听Webpack的事件并作出相应反应，从而实现各种各样的功能，如代码压缩、文件打包、代码分割等。

Tapable概述

Tapable是一个事件系统，它允许插件在Webpack构建的不同阶段注册回调函数，以便在这些阶段执行特定的任务。Tapable对外暴露的钩子可分为同步和异步两种类型，这两种类型在执行时又可以分为并行和串行两种方式。

  • 同步钩子 ：同步钩子会在所有回调函数执行完毕后立即返回。
  • 异步钩子 ：异步钩子会在所有回调函数执行完毕后才返回。
  • 并行钩子 ：并行钩子会同时执行所有注册的回调函数。
  • 串行钩子 ：串行钩子会按照注册的顺序依次执行回调函数。

Tapable提供了丰富的API，允许插件在Webpack构建的不同阶段注册回调函数。这些API包括：

  • tap() ：用于注册同步钩子的回调函数。
  • tapAsync() ：用于注册异步钩子的回调函数。
  • tapPromise() ：用于注册异步钩子的回调函数，并返回一个Promise对象。

Tapable源码解读

Tapable的源码位于Webpack的node_modules/tapable目录下，主要包括以下几个文件：

  • Hook.js ：定义了钩子的基类。
  • HookCodeFactory.js ：定义了钩子代码的生成器工厂。
  • NormalModuleFactory.js ：定义了正常模块工厂。
  • Parser.js ：定义了解析器。

Hook.js

Hook.js是Tapable的核心文件，它定义了钩子的基类。Hook类具有以下几个重要属性：

  • _args ：存储钩子参数的数组。
  • _taps ：存储钩子回调函数的数组。
  • _call ：存储钩子执行函数的引用。
  • _callAsync ：存储钩子异步执行函数的引用。
  • _promise ：存储钩子异步执行时返回的Promise对象。

Hook类还提供了以下几个重要方法：

  • tap() ：用于注册同步钩子的回调函数。
  • tapAsync() ：用于注册异步钩子的回调函数。
  • tapPromise() ：用于注册异步钩子的回调函数，并返回一个Promise对象。
  • call() ：用于执行钩子。
  • callAsync() ：用于异步执行钩子。

HookCodeFactory.js

HookCodeFactory.js定义了钩子代码的生成器工厂。HookCodeFactory类具有以下几个重要方法：

  • create() ：用于创建钩子代码生成器。
  • tap() ：用于生成注册同步钩子回调函数的代码。
  • tapAsync() ：用于生成注册异步钩子回调函数的代码。
  • tapPromise() ：用于生成注册异步钩子回调函数的代码，并返回一个Promise对象。

NormalModuleFactory.js

NormalModuleFactory.js定义了正常模块工厂。NormalModuleFactory类具有以下几个重要方法：

  • create() ：用于创建正常模块。
  • createModule() ：用于创建模块。
  • createParser() ：用于创建解析器。

Parser.js

Parser.js定义了解析器。Parser类具有以下几个重要方法：

  • parse() ：用于解析源代码。
  • evaluate() ：用于计算表达式的值。
  • resolve() ：用于解析模块名称。

Tapable使用示例

具体来说，使用Tapable Hook使用大致分为三步。

  1. 创建钩子实例。
  2. 注册回调函数。
  3. 执行钩子。

例如，以下代码演示了如何使用Tapable创建一个同步钩子并注册回调函数：

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

const hook = new SyncHook(['arg1', 'arg2']);

hook.tap('myPlugin', (arg1, arg2) => {
  console.log(`myPlugin: ${arg1}, ${arg2}`);
});

hook.call('value1', 'value2');

当调用hook.call('value1', 'value2')时，myPlugin插件的回调函数将被执行，并输出myPlugin: value1, value2。

以下代码演示了如何使用Tapable创建一个异步钩子并注册回调函数：

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

const hook = new AsyncSeriesHook(['arg1', 'arg2']);

hook.tapAsync('myPlugin', (arg1, arg2, callback) => {
  setTimeout(() => {
    console.log(`myPlugin: ${arg1}, ${arg2}`);
    callback();
  }, 1000);
});

hook.callAsync('value1', 'value2', () => {
  console.log('All plugins have been called');
});

当调用hook.callAsync('value1', 'value2', () => { ... })时，myPlugin插件的回调函数将被异步执行，并在1秒后输出myPlugin: value1, value2。当所有插件的回调函数都执行完毕后，All plugins have been called将被输出。

结语

Tapable是Webpack的核心之一，它提供了一套灵活的钩子系统，允许插件在Webpack构建的不同阶段注入自定义逻辑。通过Tapable，插件可以监听Webpack的事件并作出相应反应，从而实现各种各样的功能。了解Tapable的实现细节有助于我们更好地理解Webpack的构建过程，并能够在需要时对Webpack的构建行为进行定制化改造。

附录

生成的call方法

call: function () {
    this._tapQueue.forEach(function (tapQueueItem) {
        tapQueueItem.fn.call(this, this._args);
    }, this);
},