17-尚硅谷-webpack从入门到精通-tapable介绍和使用

好，同学们接下来呢，我们来研究的是叫插件plug，那么插件呢，对于PE来讲是个非常主要的一个工作，它能在wepe在工作的不同流，不同的流程上面呢做一些不同的事，好，那么官网上的这个wipad的这插件呢，有一些很好的介绍，所以我们来到官网，那么大家可以打到这个A啊，在这块有API这里这里面呢，最左下角这个目录这里就会有一个plug了，那么下面呢就是对plugin的一些介绍，其中呢最重要的就是comp和这个compilation这两个钩子啊，那么comp呢是一个最终的运行PE的一个最主要的一个这样的一个对象啊，Compilation呢其实也是对象里面提供了很多钩子，那么它呢起最重要的编译工作，那么我们来看一下是。Combine呢是wipa的主要引擎，那么它扩展自这个ta类啊ta类也就说在comp里面呢，我们能看到它这里呢注册了好多好多钩子啊，这些钩子呢，你可以理解为就像咱们框架中的生命周期函数一样，对吧，它先会触发一些生命转就再触发，再触发，那么这些钩子呢，就是外pad在工作流程中会触发的一些钩子，而这些钩子呢，它呢会一个一个接着触发，并且呢，每一个钩子呢，都能够注册很多个相应的这个类似于事件一样，会是触发这个跟绑定这个钩子相关的一些回电函数，能触发N个，那么这里面呢，它就那个技术叫ta啊ta，所以呢，我们要去为了研究这个comp competer啊这里面的钩子函数，所以我们呢，就得先去先把这tale类啊，先把它先搞清楚，把它搞清楚了，那我们自然就知道这里面的内容是代表什么，OK，那么所以我们接下来呢，我们主要研究的是这个ta ta呢，在这里它会提供一个文档啊。

那我点击一下，它会跳转到get up啊，所以大家呢，也可以去get up直接搜这top，那么我们去研究它这里面的内容，OK，稍等啊，反正这里往突然卡一下好了，那么这里面来到这个table类啊，OK，那么这里呢就有table的一些介绍，Table呢一共提供了这些Co子函数来跟我们使用啊，所以我们可以大概看一下这Co子函数呢，有个特点，一个是带SYC，一个是带asy c s y c呢think呢是我们的一个同步的意思啊，System代表异步的，同步呢，就是这里面同步钩子呢，一般执行一些同步代码啊，异步钩子呢，一般执行异步代码，那么不管是同步异步，它都会等里面工作做完了再接着往下走啊，这是这个，那么同步钩子呢，它还看到一些修饰钩子的一些词缀，对吧？叭方说bell啊，那么这个呢，就代表如果函数中同步钩子有返回值，那么它就会退出啊，就不执行后面的钩子了，如果它没有返回值，就会继续往下执行，所以它通过返回值。

在判断当前钩子呢，有没有出错啊，那如果像普通钩子呢，就是不管出没出错，它都往下走，大概这意思，那what for呢，就不补流呗，就是在这个钩子中，我会注册N个钩子，那么上一个钩子呢，返回值呢，会给下一个钩子这样去做的啊，然后下面的para呢，就是我们的一个并行执行，并行执行也就意味着这些异步代码呢，是可以并行同时去工作啊，谁协做完谁谁就结束呗，对吧，那么加上这个BA呢，就是也是一样的，就是如果这异步代码里面有返回值，最终的这个钩子函数有返回值，那么也会终止。

好search school呢，叫做同步执行啊，就所有的异步代码呢，我是一个执行完一个呢，再执行第二个异步代码，再执行第三个异步啊，所以是这样的。好，后面的例思呢，其实就是在前面技术上加一些词缀啊修饰，所以下面呢，我们就啊去研究一下这个tale啊，研究tale，那么来搞清楚这些钩子到底是如何去使用的，那么通过这个使用呢，我们将来就会更加清楚咱们compiler对象中的这些whoses，它到底是如何调用的。OK，那么下面呢，我们来看看例子啊。好，来到代码处，我们来新建个文件夹，叫plugins。

OK，那么我们就在这里去研究我们想要研究的这些东西，那么在研究真正的plug的写法的时候呢？我们先研究那个T。DGS，我就TDGS吧，我们去测试一下这个top OK，我们在这里面呢，写点代码啊，那么你要测试的话，首先肯定要引入它啊，引入它。好，那这个包呢，当然需要下载啊，需要下载。所以我们还需要下载一下来找到这个当前文件夹。我们那些初始化一个拍。OK，只要下载这个包啊，Top。OK，下载完成之后呢，接下来我们就可以用它了啊OK。好，它提供了很多钩子，那那么这些钩子呢，我们就不全部演示了，我们大概也是这几个，比如说一个同步的钩子，同步钩子呢，比如说think think hook啊，对吧，也可以解释下这个think boy h，然后我们再也是一个a think对吧？A think呢，Para hook对吧？还有a think这个serious hook，那么主要也是这几个，那么其他的book呢，其实都跟它差不多类似啊，所以我们就会一个演示了，好，接着呢，我们需要定一个类啊，第class类，那比方说我就定一个叫LA。

这类，然后呢，在类中的定义空抓的方法，构造方法对吧？好钩子方法这里面呢，我们来初始化我们的一个钩子容器啊，初始化钩子。钩子呢，也叫whoses啊，也叫whose，那么容器啊，数字化高容器，那么这是在this上实对象上啊，添加一个咱们的whose啊，Whoses这个属性值呢，是个对象，在对象里面注册N个钩子，对吧？诶咱们呢是去，咱们是lesson课程，那么我们去哪里上呢？我就要go啊，去哪里上咱们的课，那么这个去呢，比方是同步的，那么我就用一个think这个whose。

好一个中括号啊，中括号里面代表这个这些函数呢，它会接收到什么参数啊，接收到什么参数，比如说我们来随便写一个去哪里嘛，我就address吧，去某一个地址，那么这里呢，它就会创建一个相应的钩子容器啊中子容器，那么这些钩子容器的这些函数呢，将来都会接收到一个参数叫address address OK，那么定义好了这个容器之后呢，我们就要去使用这个容器啊，对吧，所以我们要再定义个方法去使用这些容器叫tab，那么这个方法呢，就是想办法去注册啊注册。其实就是往这个容器中，往护容器中注册相应的事件和一代函数啊。注册对吧，世界其实就类似于注册世界，也可以说是添加或加函数。添加回调函数之后呢，将来这个钩子只要被触发了，那么我里面的回调函数呢，自然就会相应的被执行，那么每个回调函数呢，你会给它取个个性化的名字啊，举个例子，比方说我们this this呢，找到我们的这个whose，再找到我这个容器go，对吧？然后在这里面呢，去绑定它呢，是通过tapb去绑定我们想要的一些实践，类似于实践啊，那么我们给它取个名字啊，然后去哪呢？我们去就我们的课程CLASS03。

有吧啊，然后后面呢，跟一个回电函数啊，回电函数呢，第一个参数就是address，就是它的地址，所以我们这里呢，就打印一下吧，打印一下啊，就看这个函数有没有触发打下的CLASS08啊，它的相应的地址address。好了，那么这个操作啊，就相当于是往这个GOGO呢，它的值呢，你可以看作是个容器，往这个容器里面呢，添加一个这样的CLASS0318的这样一个东西，那它的值呢，是个回调函数，好未来当我触发的时候呢，它就会啊执行执行这个这个容器里面的所有的回调函数了，所有回电函数。

对吧，这是添加，那怎么执行呢？比如说我们来一个定一个方法叫stop，对吧，开始呗，那么怎么执行呢？就这1.whose。那么同样的找到这个钩子啊，勾点括号方法就可以调用了，那么调用的时候呢，你需要给它传递一些参数对吧？传什么参数，传这到dress在哪里，那比方说我们的地址呢，就是C41吧，C318对吧？那么这样呢，就是去触发这个公子函数。处罚。触发盒子，那么它就会把这个容器中的钩子呢全都执行好，下面我们来一起玩一下，一起用一下，那么要用的话呢，我得去用这个lesson呗。另一个lesson。

然后呢，不需要传参，那么L呢，点tab那么就可以去注册，对吧？在l.star那么就可以去触发，所以呢，我们先要注册再去触发，那么整个内容就可以完成了。好下面呢，我们就演示一下效果，我们输入noe去运行这个temple这个文件，好这时候就能看到它打印的内容呢，是CLASS0318和C318 C318呢是因为我调用的时候传的这个C318，所以这个address的值呢就是那C318，所以呢在这里打印出来了，好那么这里大家需要注意就是这个容器中呢，不只能添加一个函数构子函数啊，还能添加多个构子函数，我们再来添加一个，比如这次呢，我来一个C410，好后面的呢不变啊，添加两个，那么这两个呢，也是会顺序执行，我们运行一下，你看他先大于C318C410，所以呢，当我用Co法触发护死，它会把这whoses容器中的所有钩子全都触发啊，全都触发，就这个。好了，那么这是think，这个whose，那么我们还有一个啊，我们再来写一个，还有一个呢，叫think boil，这个IL啊，这个hook，我们来看一下这个这个呢，正常执行呢，是和之前执行是没什么区别的，但是如果你上面一个有返回值啊，我们随便返回一个值，比如返回一，那我们再执行的话，你会发现诶，它执行到C318呢，就停止了，这个C啊零啊，这个0410呢，就不执行了，那么原因呢，很简单啊，就是它在这里，这个这种副呢，一旦遇到返回值啊，它就不会再啊，不会再往下执行了。

所以就是这样的钩子，那么这两个的同步同步钩子，同步钩子呢，也就意味着里面的任务呢，是同步执行的，同步执行的对吧？好，那么我们就相应的异步钩子啊E不钩子我们可以再定一个吧，比如离开。啊，是代表异步钩子，我们来一个异步并行啊，异步并行的钩子，OK，这里呢，都是同步钩子啊，我们都写一下吧。

他们的任务会依次执行。好，那么这个boil这户呢，这个户呢，注意啊，这个户OOK它呢，一旦有返回值就会退出。好，接下来呢，我们研究的是E不扣子啊。那么这个呢，就是异步一个变形的钩子。那么它里面任务呢，是并行执行的，所以我们来看啊，那么同样的数组里面呢，可以可以传N个参数啊，这N个参数呢，分别是他们接收的一些数据啊，你传一个也好，传两个也好，不传也可以啊，所以呢，你可以传多个参数，那么我们比方说就啊来吧，我们就来一个，比如说他的啊姓名啊，他的年龄啊，就传两个参数吧，好，然后下面呢，我们就来在这里继续绑定啊，我们同样的在同一个方法绑定，我们就不多多去整了。

OK，那么这里面呢，我们就要找到另外一个钩子容器啊，Whose这里呢，就不是钩了，是live，好live里面呢，绑定的是异步的钩子啊，异步钩子呢，你想触发的话呢，用tapb触发，用tapb去绑定的也是可以的啊。好了，可以看一下。你。啊，比如说零五。0510。好，我们这里就不要返回，值了啊，好，那么出发的话呢，也是一样的，This leave。对扣啊，我们去掉。那么这里接受两个参数啊，Name age。好，我们在这里也传一个，比如Jack是吧？

好啊，那么这是异步的，异步的方式呢，你这样写呢，其实同步其实其实意义不大，其实意义不大，我们一般来讲呢，会改造成异义步的方式啊啊，我们来看一下像异步的方式呢，去绑定这些异步的构子函数呢，一般是这样的，叫做type think啊type think。好，Type think呢，它接收这里其实两个参数没问题，因为这是它接下来会接收的，那么它还会有第三个参数，多余一个参数，多参数呢叫call back call back cb，我们叫CB啊好，那么这样异步cos呢，我们才能去做异步代码啊，一般异步cos里面呢，会放异步代码，那么比如说我们延时疫苗对吧。也是一秒去执行我们想要执行的东西，当然了，我这里就打印一下啊。好，那印证name位置啊，然后呢，第call back就可以了，调call back，那它就会代表异步代码执行完了啊，就接着往下走，这是异步的一个钩子，我们可以看一下，那么异步钩子呢，要调用的话呢，就不是call了，是Co s调Co s要触发异步钩子呢得Co s，然后呢传参，接着呢，第三个参数呢，是一个回调函数，回调函数呢，这个触发时机呢，就代表所有钩子都触发完了。

在厨房。啊，所有这个live容器中的钩子。所以呢，在这里呢，我们就能知道他最终肯定是结束了，在这里就结束了。所以呢，我们叫end end啊，我们来看效果，看效果。运行。好，咱们能看到他呢，等了一秒钟，因为这个操作也是一秒再打印的，打印完之后呢，你看打印的结果也能直接接收到，并且呢，它最终呢，也触发了印的，触发了印的那么一步勾子呢，有两种写法，其中一其有一种这种ta think的话呢，还有一种叫type。

他们都是用来定义不钩子的。好，比如0610 OK，那么type promise呢，就没有这个call了，Call back了，但是呢，它要求我们返回一个promise对象。要求我们返回promise。然后呢，在这里面呢，调用是so方法，就是成功调用这方法即是失败啊就这样的。OK，所以呢，我这个一样的call think可能会调用这个live容器中的所有钩子啊，不管你是ta think还是ta promise都会触发，对吧？然后呢，因为是因为我注册的钩子呢，是这个para，所以它是并行执行啊，那怎么看它并行执行呢，很简单。我这里是二，这里是一，如果是同步执行，那它肯定是等两秒输出这个0510，再等一秒再输出0610，如果是B型执行呢，他会等一秒输出610，再等一秒再输出0510，所以我们看打印的一个出现顺序就知道了，所以大家仔细观察。

OK，这时候呢，等一秒钟A输出了这个0610，再等一秒钟输出0510，所以呢，0610先被打印，它是在后面的钩子先打印，所以这也能测明它是个并行执行的一个方式啊，所以呢，Para呢代表并行执行，同样道理，我们会以改成下一个叫做呃，Services services呢就是串行执行啊，创行或者说同步执行啊。一波创新。呃，诶。OK，那么这个串行呢，我们一起来看一下，上面这个我就注释掉了啊。那么现在呢，我们再去看的话呢，就是个串行执行了，串行执行的话呢，呃来看啊，它呢，就会先等两秒执行这个0510，再等一秒输出这个0610，我们看效果。

两秒05101秒0610对吧，所以这创新，创新呢，说白了就是它先执行一个，再执行一个，所以呢它呢提供了很多不同种类的钩子啊，让我们去使用，那么你呢，根据自己的实际情况去选择现的钩子，那么和这个load其实一致啊，就是re呢，崇尚的是异步的方式，异步方式呢，因为它可以多做事，同一时间可以干多件事，所以这时候呢，比较靠谱一点啊，如果你是用同步对吧，那么可能就比较笨一些，它要等很久，然后注册钩子呢，不管是哪种方式啊，都会用tab和tab s，如果你在异步对吧，异步并行或者异步串行中，要注册一个同步的任务就用tab啊，要注册异步任务呢，就type s或者type promise都行啊，通常情况下呢，我们用S能可能稍微多一些，反正我们就调用comba方法promise，那就保证返回一个promise项啊，那么就OK了。

好，那么这里面呢，就是我们给大家讲一下temple这个扩啊，它报的些钩子的一些主要钩子的一些使用情况，那么这些钩子呢，我们后面就会发现啊，咱们compel了呢，他就会用上这些钩子来去完成我们想要做的一些事情啊，我想做的事情。OK。