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 .

webpack4.X The core tool library tapable Instance object Hook More articles about

  1. webpack4.0 Crush one by one (8)—— tapable piece

    webpack As the hottest building tool in the front end , Is the most important part of the front-end automation tool chain , High use threshold . This series is my own learning record , More basic , Hope to pass the question + The pattern of the solution , The specific requirements encountered in the previous end build are the starting point , Study we ...

  2. 25 individual Java Machine learning tools & library -- Reprint

    This list summarizes 25 individual Java Machine learning tools & library : 1. Weka Machine learning algorithm integrated with data mining work . These algorithms can be applied directly to a data set, or you can write your own code to call .Weka It includes a series of tools , Such as data preprocessing ...

  3. java25 individual Java Machine learning tools & library

    This list summarizes 25 individual Java Machine learning tools & library : 1. Weka Machine learning algorithm integrated with data mining work . These algorithms can be applied directly to a data set, or you can write your own code to call .Weka It includes a series of tools , Such as data preprocessing ...

  4. Java Third party toolkits / Package summary

    One . Scientific computation or matrix operation Library Scientific computing package : JMathLib It is used to calculate complex mathematical expressions and display the results graphically Java Open source class library . It is Matlab.Octave.FreeMat.Scilab A clone of , ...

  5. Python—— Detailed explanation collections Tool library

    This article is originated from the official account :TechFlow, Originality is not easy. , Ask for attention Today I'd like to introduce Python One of them is a very useful and basic tool library , be called collections. collection In English, it means container , So Gu ...

  6. Put this to use : Hand in hand teach you to build a tool library and package it , By the way JS The precision of floating point number calculation

    This article explains how to implement a tool library and package and publish it to npm For everyone to use . This tool is a score calculator , Consider the following : \[ \sqrt{(((\frac{1}{3}+3.5)*\frac{2}{9}-\fr ...

  7. Elaborate Java Mainstream logging tool library

    summary In project development , To keep track of the code running , Log is often used to record information . stay Java The world , There are many log tool libraries to realize the log function , So we don't have to build wheels over and over again . Let's take a look at the mainstream logging tools one by one . java.util ...

  8. JSP Core tag library

    1 JSTL Tag library Introduction JSTL Tag libraries are used to make up for html The lack of labels , It was born of standardizing the use of custom tags . Use JSLT The purpose of the label is not to jsp The page appears java Logic code 2 JSTL Label Library Classification Core standard ...

  9. JSTL The core tag library uses

    JSTL What is it? ? java standard taglib(java Standard label library ). What is the label ? sun A technical specification formulated by a company , Used to put jsp On the page java Code usage is similar to html To replace One ...

  10. Java Mainstream logging tool library

    In project development , To keep track of the code running , Log is often used to record information . stay Java The world , There are many log tool libraries to realize the log function , So we don't have to build wheels over and over again . Let's take a look at the mainstream logging tools one by one . 1.java.util.lo ...

Random recommendation

  1. HTML5 The media

    1. Video format Format file describe AVI .avi AVI (Audio Video Interleave) The format was developed by Microsoft . All runs Windows All of our computers support AVI Format . It's very common on the Internet ...

  2. Docker series ( Two ) Component is introduced

    Mirror image The image is a read-only template , Can be used to create Docker Containers . Containers Docker Use containers to run applications , The container is a running instance created from the image . It can be started . Start . stop it . Delete . Each container is isolated from each other , Secure platform . can ...

  3. const void *a And void *const a The difference between

    const void *a This defines a pointer a,a Can point to any type of value , But the value it points to must be a constant . In this case , We can't change the object we're pointing to , But it can make the pointer point to other objects . such as : const void ...

  4. 《A Knowledge-Grounded Neural Conversation Model》

    abstract Most of the current models can be applied in the chatting scene , But there's no evidence that they can be applied to more useful conversation scenarios . This paper proposes a knowledge driven , Neural network dialogue system with background knowledge , The purpose is to produce more ...

  5. theano Installation problems

    WARNING (theano.configdefaults): g++ not available, if using conda: `conda install m2w64-toolchain` ...

  6. Verse 402 ,Django+Xadmin Build a standard online education platform — Production environment deployment ,uwsgi Installation and startup ,nginx Installation and startup of ,uwsgi And nginx Configuration file for + Virtual host configuration

    Verse 402 ,Django+Xadmin Build a standard online education platform — Production environment deployment ,uwsgi Installation and startup ,nginx Installation and startup of ,uwsgi And nginx Configuration file for + Virtual host configuration Software version   uwsgi- ...

  7. Talking about JavaScript Object array based on a property sort Up and down sort

    1. Customize a comparator , Its parameters are the attributes to be sorted . 2. Pass the comparator with parameters into sort(). var data = [ {name: "Bruce", age: 23, id: 16, s ...

  8. About Manifest merger failed : uses-sdk:minSdkVersion 8 cannot be smaller than version 16 declared in lib

    The log is a little long , The title is endless , The screenshot is as follows : There are pictures to know , It's because of the introduction of libary Inside build.gradle In the document minSdkVersion Inconsistencies lead to this problem . If the changes are consistent . The problem is co ...

  9. ie The file name is garbled when the browser downloads the file

    When doing a file download function , use ie The file name is garbled when the browser downloads , Foxes and Google are normal , After modification ie According to the normal , The modification method is as follows : @RequestMapping(value = "fileDownload" ...

  10. Use pictures to show email Address

    import java.awt.Color; import java.awt.Font; import java.awt.FontMetrics; import java.awt.Graphics2D ...