18-尚硅谷-webpack从入门到精通-complier的hooks使用

好了，那么设计设程体呢，我们讲的tapple啊，Topple呢，就是这compiler这里面里面的一些东西，还包括compilation啊，都是使用tapple这个类啊去做事的，那么我们接下来也就这个cup这个comp啊，Comp点开啊，我们能看到它这里面的提供很多钩子，这钩子呢，其实就插件工作一些东钩子啊就是呢，Wepe呢，它提供些插件对吧？插件呢，就是在某一些钩子函数中调用，调用的时候呢，去修改相关的资源，或者添加线的资源，从而使wi派D打包的时候呢，我们的资源发生变化，或者是呢啊输出更多的资源，所以就是这，所以插件的主要就是做这些事的，那么我们的compel是什么呢？Compel就是啊，插件在运行过程中呢，它会触发compel上面的各个钩子，从上到下会依次触发，有这么多流程啊，什么interruption啊，对吧，在在处理这个entry的时候就开始了，然后什么run啊，当我允当我读取这个record的时候。

开始雕，那么每一个钩子呢，它其实在这里都有很详细的解释，就是解释这个钩子呢，到底是什么的时候雕的，那么所以我们能看到很多，所以呢，我们这里呢，就会挑几个重要的钩子去演示一下啊，那么比方说有个emis em米呢，就是资源输出到output目录之前执行，所以你要修改资源，那么在这个里还能再操作啊，在after em之后呢，它就输出之后了，那你再操作就没有太大意义了啊，你要下就自己要去操作，然后还大的话呢，就是在compulation，去做完了所有事再去执行啊，就这个，然后还能什么fail等等一些这样的一个工作，好下面呢，我们就挑几个钩子我们去做一下。OK，那么大家来一起来写一下就能感受到了。好，下面呢，我们回到代码。代码里面呢，我们定了个plug，那么这里面呢，我们再去写一些WiFi配置，我们呢要通过插件的方式去使用刚刚那些comp上面的钩子函数啊，所以呢，我定一个ipad GS，它moduport向外暴露出去一个对象，对象里面呢，我们将来呢要在这定义一些plugs。

好，Plugs呢，当然我现在还没有定义啊，所以我需要去写一个我新建的文件夹呢，叫plugs对吧，在这里面再新建一个文件，我们来测试的文件plug插件呢，一般来讲呢，首字母是大写，所以呢，我首字母大写叫pluging e啊是个测试的一个plug，每一个pluging呢都是一个类啊，都是个类。PLUS1啊，不是个类，然后呢，记得把它暴露出去。好，当然这里面我啥也没写啊，因为PE里面呢，它肯定需要引入插件的，所以我们把这个基本准备工作呢做好。

好，引入之后呢，插件用法呢，都是new调用啊，这是因为是new调用，所以它必然是一个构造函数，或者是一个类啊，是个类，好那么定义完之后呢，接下来我肯定还得写定代码啊，对吧，写点代码它呢必须要有个入口文件，所以我要写一个index JS。那GS里面的写多少东西就无所谓了啊，因为我们现在主要是研究的是插件的一些具体作用啊。OK，准备工作做好了，那么下面呢，关键的是就是写这个插件的，写这个，那么在咱们的PE中插件呢，它new插件的时候，最终都会调用一个方法叫apply方法。调这个派，所以我们在apply里面呢，要去做相应的事，其中呢，调apply的时候呢，它会把这comper对象给你传进来，传进来所以我们就会通过comp对象找到它上面绑定的一些钩子，然后去往钩子里面塞入一些回调函数，从而让在PA在执行过程中呢，诶执行相应我们绑定的构思函数，举个例子啊，我们来看到这个看下文档啊，文档呢，这里面有个amit。

看到艾米，艾米这里写的啊，它呢是继承的，它是它里面的容器呢，等于等价于这个a think series hook就是这个异步串行hook，所以呢，我们会把emit里面呢，去绑定一些相应的钩子啊，相应的函数来看comp.whose它容器呢也是whose.emit对吧？然后再去点相应的一些方式啊，比如说我们呢，要想把定一个同步的一个方法，那也可以点ta，那么一般来讲呢，我们都会跟当前插件名呢绑定在一起啊，然后跟一个回电函数呗，回调函数的参数呢来看啊，在文档中也写了，回调的参数呢就是compilation啊compilation在这里写了compilation，诶那么我可拿到它啊，当然这个compilation呢，其实我们现在呢没啥用途啊，我这里呢就打印一下对吧，I tab出发了。

好，那么它呢，肯定是可以绑定多个的，所以你再去绑定的话呢，也是没有问题啊，也是没有问题，可以绑定多个。好，那么我们待会就看它会不会触发就OK了啊来我们呢打开ta，那么我们呢，要去使用wipe的话呢，我们来下载派相关的包啊，外派外派看C。看D啊OK，下完之后呢，我们再运行呢，我们就能看到我们想要的效果了。OK，那么下载时间呢，需要一点时间啊，我们这里呢，除了能注册em这个OOK呢，我们还看到这里有个after emit，它呢也是think service hook，接受参数呢也是叫combination，那么我们也可以注册这个钩子。对吧，这个啊，我们都会用tab来做after。

OK plug，那么这里呢，是up出发的，我们可以运行啊，那外派OK啊，他这里说呢，啊，对，咱们这里是使用的是yesl语啊，Common，所以这里暴露的方式错了，是model啊，OK，那么这样呢就完事了。好，咱们来看啊，它这里呢，打印的emit tab啊，11AFTER emit tab11，然后呢，最后输出结果，当然了，因为我们的文件没有做任何修改，所以文件肯定没有发生变化，那么从这里能看到就是我们第一在外派中所谓的插件，实际上就是需要在外派的一些指定的一些生命周期函数中去干一些活，那么这里面呢，我们就看到两个生命周期函数am Miss和Miss，那么也能看到他们执行顺序呢，是按照我们指定顺序去执行的，对吧？那除了这些钩子呢，当然还有啊，比方说还有done，我们都可以试试啊，它呢也是s service hook，但是接收参数呢，叫stays stays啊来。

下一个。那么这里呢，就改成down啊，这个容器呢是down tap，那么这里呢就叫down，那么接收的参数呢是states啊，States states文件信息啊，我们来看一下，那么这些顺序呢，也是先是em update em Miss和这个档啊，是没有问题的这些顺序啊，那么因为他们是这个E步的啊，所以呢，你这里其实除了绑定tab以外呢，其实比方说我以第一个为例啊，我来判定tab think。都可以啊。对吧台think呢，就是它这里呢，会接收多一个参数叫CB啊CB，那么我们呢，可以去来一个定时器。对吧，一秒钟我们再打印，那么CB呢，一定要调用啊，否则的话呢，它是不会执行的，所以我们要调用一下啊，那么这样的呢，这里就注册个异步钩子，所以它先会执行这个，他们异步是它是异步串行钩子，所以他先会触发第一个，再触发一二个，再等一秒再触发后面的，所以我们看效果。

那出发第一个，然后等一秒出发第二个，然后再出发后面的啊，出发后面的啊，这是table table think，我们可以再看一下，刚刚没改过来啊，再看一下。那么诶，这里就打印的ta think，能明显看到它在这里停了一下，那么当然除了ta think定义这个一步钩子呢，你还可以使用ta promise去定义啊，那么这些方式呢，就是等价于我们之前用那个temple类的那种用法，比方说我们这里return一个promise。OK，那么这里面呢，就就是resolve，这里面就没有com backt参数了啊，那么这条调resolve法让程序呢，接着往下执行，那么这里呢是type promise type promise我们看效果，那么他就会等一秒输入type thing，再等一秒输入type promise，再去执行后面的操作，有了生命周期函数呢，它会一定会保证前面的生命周期全部执行完，再执行后面的生命周期，类似于这样的OK，那么整体就执行完了啊好了，那么这里面呢，其实就是我们的对应的文档上面comp类compel里面的一些生命钩子函数，他们的一些触发流程，以及酶公子函数呢，对应的是相应的一个temple类的一个H，对吧？那么每个户OOK呢都起不一都做法呢都不太一样，所以大家仔细看，而每个户OOK呢，它能接收到参数呢，在这里都给你指定了，所以呢，你可以根据文档的信息来去知道一些信息好了，那么这里呢，就是我们的一个插件的一些基本的一些介绍啊，基本的内容的使用。