webpack(高级)--Tapable

最新推荐文章于 2024-08-31 10:33:23 发布

_聪明勇敢有力气

最新推荐文章于 2024-08-31 10:33:23 发布

阅读量351

点赞数

分类专栏： webpack 文章标签： webpack javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_65402230/article/details/129058899

版权

webpack 专栏收录该内容

6 篇文章

订阅专栏

文章详细介绍了Webpack中用于处理生命周期的Tapable库，包括SyncHook、SyncBailHook、SyncLoopHook、SyncWaterfallHook等同步Hook，以及AsyncParallelHook和AsyncSeriesHook等异步Hook的使用方法和它们各自的行为特性，如同步执行、返回值影响后续事件、并行与串行执行等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);