The tapable instance object hook of webpack4. X core tool library

メSerendipity 2021-02-23 01:00:39
tapable instance object hook webpack4.


One .tapable brief introduction

tapable by webpack The underlying core tool library ,webpack The realization of many functions is inseparable from it ,webpack The compilation process of is configuration initialization ---> Content compilation ---> Output compiled content , The whole implementation process of these three can be called

Event driven event flow mechanism , This mechanism connects different workflows to complete all the work , The two core parts are Responsible for compiling complier Responsible for creating bundles Of compilation.tapable It's a separate library

stay webpack There's a lot of use in ,tapable The workflow is Instantiation hook Register event monitoring ----> adopt hook Trigger event monitoring ----> Executing executable code generated by lazy compilation .

Two .Hook brief introduction

Hook The essence is tapable Instance object ,hook Execution mechanism can be divided into synchronous and asynchronous , For asynchrony, there are parallel and serial , among hook The characteristics of the implementation are as follows :

Hook: Ordinary hook , The monitors are independent of each other .

BailHook: Fuse hook , A listener returns a non undefined It will not be executed later .

WaterfallHook: Waterfall gully , The last listening return value can be passed to the next .

LoopHook: Loop hook , If not currently returned false And keep doing it .

tapable Library synchronization hook is divided into SynckHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook.

tapable Library asynchronous serial hook is divided into AsyncSeriesHook,AsyncSeresBailHook,AsynvSeriesWaterfallHook.

tapable Library asynchronous parallel hooks are divided into AsyncParalleHook,AsyncParalleBailHook.

3、 ... and . The use of synchronous hooks

1. Synchronization hook syncHook

const { SyncHook } =require('tapable')
// Examples of hooks 
let hook =new SyncHook(['name','age'])
hook.tap('fn1',function(name,age){
console.log('fn1---->',name,age)
})
hook.tap('fn2',function(name,age){
console.log('fn2---->',name,age)
return 'res'
})
hook.tap('fn3',function(name,age){
console.log('fn3---->',name,age)
})
// Trigger monitor 
hook.call('lw','18') // The result is fn1-----> lw 18 fn2-----> lw 18 fn3-----> lw 18

In the above code, even fn2 return I saw the back fn3 Will still carry out .

2. Synchronization hook syncBialHook

const { SyncBailHook } =require('tapable')
// Examples of hooks 
let hook =new SyncBailHook(['name','age'])
hook.tap('fn1',function(name,age){
console.log('fn1---->',name,age)
})
hook.tap('fn2',function(name,age){
console.log('fn2---->',name,age)
return 'res'
})
hook.tap('fn3',function(name,age){
console.log('fn3---->',name,age)
})
// Trigger monitor 
hook.call('lw','100') // The result is fn1-----> lw 18 fn2-----> lw 18

In the above code and SyncHook The difference is fn2 Add a return ( Not undefined) hinder fn3 Not execute , It means that the pipeline is broken

3. Synchronization hook syncWaterfallHooks

const { SyncWaterfallHook } =require('tapable')
// Examples of hooks 
let hook =new SyncWaterfallHook(['name','age'])
hook.tap('fn1',function(name,age){
console.log('fn1---->',name,age)
return 'ret1'
})
hook.tap('fn2',function(name,age){
console.log('fn2---->',name,age)
return 'ret2'
})
hook.tap('fn3',function(name,age){
console.log('fn3---->',name,age)
return 'ret3'
})
// Trigger monitor 
hook.call('lw','100') // The result is fn1-----> lw 18 fn2-----> ret1 18 fn3-----> ret2 18

The feature of this hook is that it is returned through the last listener ret1 Pass it to the next hook function fn2 Then return By analogy So it's also called Waterfall gully

4. Synchronization hook SyncLoopHook

const { SyncLoopHook } =require('tapable')
// Examples of hooks 
let hook =new SyncLoopHook(['name','age'])
let count1=0
let count2=0
let count3=0
hook.tap('fn1',function(name,age){
console.log('fn1---->',name,age)
if(++count1==1){
count1=0
return undefined
}
return true;
})
hook.tap('fn2',function(name,age){
console.log('fn2---->',name,age)
if(++count2==2){
count2=0
return undefined
}
return true
})
hook.tap('fn3',function(name,age){
console.log('fn3---->',name,age)
})
// Trigger monitor 
hook.call('lw','100')
// The result is : 
//fn1-----> lw 18 fn2-----> lw 18 fn1-----> lw 18 fn2-----> lw 18 fn3-----> lw 18

 You can see from the printed results that the loop has been executed 2 All over , For the first time, it was carried out to fn2 stop it , The second time 3 After debugging the code, we know that the bottom layer is a do while loop ,while The re execution condition for is return The content is true.

Four . The use of asynchronous hooks

For the use of asynchronous hooks , There are three ways to add event listening :tap tapAsync tapPromise.

1.tapable Library asynchronous parallel hook
// The first way tap
const { AsyncParallelHook } =require('tapable')
// Examples of hooks 
let hook =new AsyncParallelHook(['name'])
hook.tap('fn1',function(name){
console.log('fn1---->',name)
})
hook.tap('fn2',function(name){
console.log('fn2---->',name)
})
hook.callAsync('lw',function(){
console.log(' The callback operation is finally executed ')
})
// Print the results fn1---->lw fn2----->lw Finally, execute the callback 

Parallel hook tap The method is synchronous , It's just that it's hard to see synchronization from the print results , Let's change it in another way to see the effect .

// The second way tapAsync
// adopt settimeOut Asynchronous operations , If it's parallel execution , Execution results should be biased towards large time values , We use it console.time Under the mark 
// The code is as follows :
const { AsyncParallelHook } =require('tapable')
// Examples of hooks 
let hook =new AsyncParallelHook(['name'])
console.time('time')
hook.tapAsync('fn1',function(name,callback){
setTimeout(()=>{
console.log('fn1---->',name)
callback()
},1000)
})
hook.tapAsync('fn2',function(name,callback){
setTimeout(()=>{
console.log('fn2---->',name)
callback()
},2000)
})
hook.callAsync('lw',function(){
console.log(' The callback operation is finally executed ')
console.timeEnd('time')
})
// The result is fn1--->lw fn2--->lw Print it out in sync time:2.002s So it turns out to be parallel execution 
// The third way tapPromise
const { AsyncParallelHook } =require('tapable')
// Examples of hooks 
let hook =new AsyncParallelHook(['name'])
console.time('time')
hook.tapPromise('fn1',function(name){
return new Promise(function(resolve,reject){
setTimeout(()=>{
console.log('fn1---->',name)
resolve()
},1000)
})
})
hook.tapPromise('fn2',function(name){
return new Promise(function(resolve,reject){
setTimeout(()=>{
console.log('fn2---->',name)
resolve()
},2000)
})
})
hook.promise('lw').then(()=>{
console.log('end Yes ')
console.timeEnd('time')
})
// The result is fn1--->lw fn2--->lw Print it out in sync time:2.002s Also parallel execution 
//AsyncParallelBailHook
const { AsyncParallelBailHook } =require('tapable')
// Examples of hooks 
let hook =new AsyncParallelBailHook(['name'])
console.time('time')
hook.tapAsync('fn1',function(name,callback){
setTimeout(()=>{
console.log('fn1---->',name)
callback()
},1000)
})
hook.tapAsync('fn2',function(name,callback){
setTimeout(()=>{
console.log('fn2---->',name)
callback('err')
},2000)
})
hook.tapAsync('fn3',function(name,callback){
setTimeout(()=>{
console.log('fn3---->',name)
callback()
},3000)
})
hook.callAsync('lw',function(){
console.log(' The final callback is executed ')
console.timeEnd('time')
})
// The result is fn1---->lw fn2--->lw Finally, the function callback executes time:2.002s fn3--->lw
 From the print results fn2 Inside callback('err') Returns an error So in fn2 It's blocked in progress , The total running time is close to 2s Last fn3 And it's printed out because there's a settimeout Control so get to 3s It will be printed .

2.tapable Library asynchronous serial hook
const { AsyncSeriesHook } =require('tapable')
// Examples of hooks 
let hook =new AsyncSeriesHook(['name'])
console.time('time')
hook.tapPromise('fn1',function(name){
return new Promise(function(resolve,reject){
setTimeout(()=>{
console.log('fn1---->',name)
resolve()
},1000)
})
})
hook.tapPromise('fn2',function(name){
return new Promise(function(resolve,reject){
setTimeout(()=>{
console.log('fn2---->',name)
resolve()
},2000)
})
})
hook.promise('lw').then(()=>{
console.log('end Yes ')
console.timeEnd('time')
})
// The result is fn1--->lw fn2--->lw time:3.002s(1s+2s) Serial is very close to our synchronization hook , Just one more callback operation 
/**************************************************************************************************************************************************************************/
“ As promised ” What a beautiful word , It's hard to wait , But never fail .
版权声明
本文为[メSerendipity]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222174945907O.html

  1. vue判断elementui中el-form是否更新变化,变化就提示是否保存,没变就直接离开
  2. 算法题:两数之和——JavaScript及Java实现
  3. 高性能 Nginx HTTPS 调优
  4. Why Vue uses asynchronous rendering
  5. day 31 jQuery进阶
  6. day 30 jQuery
  7. CSS whimsy -- using background to create all kinds of wonderful backgrounds
  8. Why are more and more people learning front end?
  9. What do you do with 4K front-end development?
  10. 8 years of front-end development knowledge precipitation (do not know how many words, keep writing it...)
  11. What is the annual salary of a good web front end?
  12. Front end novice tutorial! How to get started with web front end
  13. Will the front end have a future?
  14. Is the front end hard to learn?
  15. Seven new Vue combat skills to improve efficiency in 2021!
  16. Is front end learning difficult?
  17. How about the process of Web front-end development and self-study?
  18. Front end learning route from zero basis to proficient
  19. What is the basis of learning front end?
  20. What knowledge points need to be learned for self-study front end? How long can I become a front-end Engineer?
  21. An inexperienced front-end engineer, what are the common problems when writing CSS?
  22. HttpServletRequest get URL (parameter, path, port number, protocol, etc.) details
  23. Springboot starts http2
  24. Enabling http2.0 in spring boot
  25. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  26. Using JavaScript in Safari browser history.back () the page will not refresh after returning to the previous page
  27. vue.js Error in win10 NPM install
  28. In less than two months, musk made more than $1 billion, more than Tesla's annual profit
  29. Springboot starts http2
  30. Vue event bus
  31. JQuery easy UI tutorial: custom data grid Pagination
  32. Using okhttp and okhttpgo to obtain onenet cloud platform data
  33. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  34. HTTP 1. X learning notes: an authoritative guide to Web Performance
  35. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  36. HTTP 1. X learning notes: an authoritative guide to Web Performance
  37. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  38. Event bubble and capture in JavaScript
  39. The root element is missing solution
  40. Event bubble and capture in JavaScript
  41. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  42. Javascript数据类型
  43. HTTP interface debugging tool! 48000 star HTTP command line client!
  44. Parameter encryption of front end URL link band
  45. HTTP interface debugging tool! 48000 star HTTP command line client!
  46. Three front end frameworks: data binding and data flow
  47. Reading Axios source code (1) -- exploring the realization of basic ability
  48. Event bubble and capture in JavaScript
  49. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  50. R & D solution e-Car front end monitoring system
  51. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  52. R & D solution e-Car front end monitoring system
  53. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  54. 解决ajax跨域问题【5种解决方案】
  55. Top ten classic sorting of JavaScript
  56. HTTP 1. X learning notes: an authoritative guide to Web Performance
  57. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  58. My http / 1.1 is so slow!
  59. Why Vue uses asynchronous rendering
  60. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for