当前位置：首页 > news >正文

webpack(高级)--Tapable

news 2025/6/27 0:28:07

webpack

我们直到webpack中有两个非常重要的类Compiler和Compilation
他们通过注入插件的方式来监听webpack的所有声明周期
插件的注入是通过创建Tapable库中的各种Hook的实例来得到

Tapable

Tapable中的Hook分为同步与异步

同步 SyncHook SyncBailHook SyncWaterfallHook SyncLoopHook

异步分为并行与串行
并行 AsyncParalleHook AsyncParalleBailHook
串行 AsyncSeriesHook AsyncSeriesBailHook AsyncSeriesWaterfallHook

bail: 当有返回值时就不会执行后续的事件
Loop: 当返回值为true 就会反复执行该事件当返回值为undefined或者不返回内容就退出事件
Waterfall: 当返回值不为undefined时会将这次返回的结果作为下次事件的第一个参数
Parallel: 并行会同时执行此事件处理回调结束才执行下一次事件处理回调
Series: 串行会等待上一是异步的Hook

SyncHook基本使用

const { SyncHook } = require("tapable");class MyCompiler {constructor() {this.hooks = {syncHook: new SyncHook(["name", "age"]),};//用hooks监听事件（自定义plugin）this.hooks.syncHook.tap("event1", (name, age) => {console.log("event1事件监听了", name, age);});}
}const compiler = new MyCompiler();
compiler.hooks.syncHook.call("kobe", 24);

SyncBailHook基本使用

const { SyncBailHook } = require("tapable");class MyCompiler {constructor() {this.hooks = {SyncBailHook: new SyncBailHook(["name", "age"]),};//用hooks监听事件（自定义plugin）this.hooks.SyncBailHook.tap("event1", (name, age) => {console.log("event1事件监听了", name, age);return 123});this.hooks.SyncBailHook.tap("event2", (name, age) => {console.log("event2事件监听了", name, age);});}
}const compiler = new MyCompiler();
compiler.hooks.SyncBailHook.call("kobe", 24);

在这里插入图片描述

SyncLoopHook基本使用

const { SyncLoopHook } = require("tapable");class MyCompiler {constructor() {this.hooks = {SyncLoopHook: new SyncLoopHook(["name", "age"]),};//用hooks监听事件（自定义plugin）this.hooks.SyncLoopHook.tap("event1", (name, age) => {console.log("event1事件监听了", name, age);return true;});this.hooks.SyncLoopHook.tap("event2", (name, age) => {console.log("event2事件监听了", name, age);});}
}const compiler = new MyCompiler();
compiler.hooks.SyncLoopHook.call("kobe", 24);

在这里插入图片描述

SyncWaterfallHook 基本使用

const { SyncWaterfallHook } = require("tapable");class MyCompiler {constructor() {this.hooks = {SyncWaterfallHook: new SyncWaterfallHook(["name", "age"]),};//用hooks监听事件（自定义plugin）this.hooks.SyncWaterfallHook.tap("event1", (name, age) => {console.log("event1事件监听了", name, age);return 111;});this.hooks.SyncWaterfallHook.tap("event2", (name, age) => {console.log("event2事件监听了", name, age);});}
}const compiler = new MyCompiler();
compiler.hooks.SyncWaterfallHook.call("kobe", 24);

在这里插入图片描述

AsyncParallelHook 基本使用

const { AsyncParallelHook } = require("tapable");class MyCompiler {constructor() {this.hooks = {parallelHook: new AsyncParallelHook(["name", "age"]),};//用hooks监听事件（自定义plugin）this.hooks.parallelHook.tapAsync("event1", (name, age) => {setTimeout(() => {console.log("event1事件监听执行", name, age);}, 3000);});this.hooks.parallelHook.tapAsync("event2", (name, age) => {setTimeout(() => {console.log("event2事件监听执行", name, age);}, 3000);});}
}const compiler = new MyCompiler();
setTimeout(() => {compiler.hooks.parallelHook.callAsync("kobe", 24);
}, 0);

在这里插入图片描述

AsyncSeriesHook 基本使用

const { AsyncSeriesHook } = require("tapable");class MyCompiler {constructor() {this.hooks = {seriesHook: new AsyncSeriesHook(["name", "age"]),};//用hooks监听事件（自定义plugin）this.hooks.seriesHook.tapAsync("event1", (name, age,callback) => {setTimeout(() => {console.log("event1事件监听执行", name, age);callback()}, 3000);});this.hooks.seriesHook.tapAsync("event2", (name, age,callback) => {setTimeout(() => {console.log("event2事件监听执行", name, age);callback()}, 3000);});}
}const compiler = new MyCompiler();
setTimeout(() => {compiler.hooks.seriesHook.callAsync("kobe", 24,()=>{console.log('所有任务都执行完了')});
}, 0);