做网站就业要会什么问题,女儿考试没圈关键词,wordpress comment_form(),辽宁建设考试培训网站webpack
我们直到webpack中有两个非常重要的类Compiler和Compilation 他们通过注入插件的方式 来监听webpack的所有声明周期 插件的注入是通过创建Tapable库中的各种Hook的实例来得到
Tapable
Tapable中的Hook分为同步与异步
同步 SyncHook SyncBailHook SyncWaterfallHook…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监听事件自定义pluginthis.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监听事件自定义pluginthis.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监听事件自定义pluginthis.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监听事件自定义pluginthis.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监听事件自定义pluginthis.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监听事件自定义pluginthis.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);
