网络包核心模块tapable分析

本文介绍了Webpack的核心模块tapable，并与大家分享如下：

前言

Webpack是现代JavaScript应用的静态模块打包器，是前端项目自动化和优化不可或缺的工具。Webpack的加载器和插件是由Webpack开发者和社区开发者共同贡献的，但目前还没有系统的开发文档。如果要编写加载器和插件，就必须了解Webpack的原理，也就是了解Webpack的源代码。tapable是Webpack所依赖的核心库。可以说，不懂tapable，就无法理解Webpack的源代码。因此，本文将分析和模拟tapable提供的类。

tapable简介

Webpack本质上是一种事件流机制，其工作流程是串联插件。tapable是这一切的核心。负责编译的编译器和负责创建包的编译器是可tap构造函数的例子。

打开Webpack 4.0的源代码，您会看到以下方法，以Sync和Async开始，以Hook结束。这些是tapable核心库的类，它们为我们提供了不同的事件流执行机制，我们称之为“钩子”。

//如下介绍tap able:const { sync hook、syncbailhook、syncbailhook、syncloophook、asyncparallelhook、asyncparallelbailhook、asyncseriesook、AsyncSeriesBailHook、async series fallhook }=require(' tap able ')；上面实现事件流机制的“钩子”可以分为“同步”和“异步”两类，“异步”可以分为“并行”和“串行”两类，“同步”的钩子都是串行的。

同步类型的钩子

1、同步挂钩

SyncHook是串行同步执行，不关心事件处理程序的返回值。触发事件后，所有事件处理程序将按照事件注册的顺序执行。

//使用sync hook hook const { sync hook }=require(' tapable ')；//创建一个实例让synchook=new synchook (['name '，' age '])；//注册事件synchook.tap ('1 '，(名称，年龄)=console.log ('1 '，名称，年龄))；syncHook.tap('2 '，(姓名，年龄)=console.log('2 '，姓名，年龄))；syncHook.tap('3 '，(姓名，年龄)=console.log('3 '，姓名，年龄))；//触发一个事件，让监听函数执行syncHook.call('panda '，18)；//1 panda 18//2 panda 18//3 panda 18将tapable中的SyncHook解构为一个类。要注册事件，您需要首先创建一个实例。创建实例时，可以传入一个数组，该数组存储触发事件时传入的参数。实例的tap方法用于注册事件，并支持传入两个参数。第一个参数是事件名称。在Webpack中，一般用于存储某个事件对应的插件名称(名称可以是任意的，但只起到注释的作用)。第二个参数是事件处理程序，函数参数是在执行调用方法以触发事件时传入的参数。

//模拟SyncHook类synchook类{constructor (args) {this。args=argsthis . tasks=[]；}点击(名称，任务){ this.tasks.push(任务)；}通话(.args) {//还可以抛出一个异常if (args。拉长这个。啊。长度)参数不足时抛出新的错误；//传入参数严格对应创建实例的传入数组中指定的参数，执行时的冗余参数为undefined args=args.slice (0，this . args . length)；//执行事件处理函数this。tasks.foreach (task=task(.args))依次；}}tasks数组用于存储事件