19-尚硅谷-webpack从入门到精通-compilation的介绍和使用

接下来我们要研究的是compil，上节呢我们研究的comp了comp了呢，它里面包含了一些啊钩子，这些钩子呢，就是一些生命周期函数，说白了就是we派在执行的时候，它会依次触发的各种啊函数，那么在触发的时候呢，Compel里面呢，会创建一个东西叫comp啊，所以接下来我们也就compulation comp呢，它是一个对象，这个对象呢，它既有像compiller他们这样的一些钩子函数以外呢，还包含了一些特殊的一些对象啊，那么这对象里面呢，就包含了对我们打包的资源呢，做各种操作啊对吧，比方说我要添加的资源，那么我们就得操作compil里面东西，那么我要修改，那么也可以去compil里面做些操作啊，所以呢，我们下面去研究一个第二个重要的对象，Compil。好，那么combination里面呢，它呢是作为对象呢，它有很多属性和很多方法，那么后面呢，我们也会挑一些重要的去研究一下啊，那么现在大概说一下，除此以外呢，它也像comp一样，有很多个钩子函数啊，它们也是按照顺序依次触发的，依次触发的，OK，那么这些呢，我们待会通过一个例子来一起来看一看它到底的用法，好，下面呢，我们来写个例子，来更加深刻的认识一下这个comp OK，那么我们这里呢，就要在之前的plug in的基础上呢，我们再新进个插件啊，这次呢，我们研究的是comp，我们呢叫PLUG2。

嗯，OK，那么这里面内容呢，就去掉吧，我们直接写一个class，咱们的plug two啊，OK，然后呢，并且呢，通过model sports把它暴露出去。好，那么我们来去定义啊，那么它插件呢，都需要定义那个OB大方法对吧，因为它最终呢都会调用这个方法，那么调样的时候呢，会传这个compileler对象给你，所以呢，我们会通过compile对象呢，往外派里面呢添加一些我们想要触发的一些构思函数，其中comp里面呢，需要有一个钩子函数啊，我们要定义这个，我们呢现在想要操作的是那个compil，那comp在什么时候会从会出会生成的compilation呢？我们可以看一下compile那个文档，在compile里面能往下走啊，它这里呢有个钩子叫this compilation这个钩子这个S这个钩子呢，它是在初始化comp comp的时候调用的，也就说当然这个钩子出发了，Comp就会初始化，后面呢，就会基于这去生成我们构建的一些相应的资源，所以我们要操作要去查看，那么最快的一个节点呢，就是这个T。

这钩子函数，那么能看到它呢，是一个同步钩子，同时呢介绍了两个参数，第一个是我们需要的combination，第二个呢是combination的一些parent它的参数啊，这个参数呢，实际上就是后前面呢，你可以去啊去操作的啊。

好，那么我们关键的要的是ulation，那么我们就要注册这个钩子啊，那么是同步钩子我们来看，所以我们通过time法去绑定啊，那么传的一个名称插件名称我们就拉二啊，后面呢跟一个回调函数，回调函数里面呢，就有我们想要操作的这个comp。啊，Compilation OK，那么前面这个啊，应该写错了。OK，好，呃，那么我们来往下走啊，Comp，那么comp呢，它里面的东西很多啊，我们可以打印看一下，它上面呢有很多东西。那么在这里呢，如果你直接打印啊，我们可以尝试运行一下啊，我们直接打印的话呢，那你看到其实挺难看的啊零四好，那么我们运行这个npspa好，当然了，运行这个指令呢，我们还有个前提啊，就是这个插件呢，我们也得在外pad那里被被用上才行啊，所以这里呢，我不用put in了，我用PUT2。

找到原因呢，就去注释掉。注是这啊嗯，拉2OK，那么写完了，那么它就会用上它，我们来运行一下预习，诶它打印了这个ulation，那么我们可以拉长一点啊，那么ulation里面东西非常多，所以你打印看的话呢，看起来说实话挺不好看的，挺麻烦的啊，所以呢，我们就想去更好的去查看这对些它到底有什么东西，那么我们就教大家如何在no中去调试这个外PED密代码，那么为了因为我们后面呢可能需要用调试啊，所以呢，我在这里呢，拍里面的提前啊先配照指令，比方说呢，我将PM star啊start，那么指定呢，对应上就是这样的，我们来写一下。

首先node代表呢，你要通过noe启动干干干BRK好干expect，那就是调试模式啊，BRK呢，就是在首行打一个断点，对吧，打个断点就是bring啊，就在首行打一个断点啊，OK，那么我要调试谁呢？我要调试的是这个no models下面的wepa。We pack的并目录啊，We派并目录下面的wi pack d JS，我来调试这个文件啊，所以这个呢，就是通过node去运行这个文件，那么以调试模式去运行它，所以这个时候啊，我们代码呢就会在首行停住，好在首行提出还不够，那么我们需要在我们调试的地方呢，打一个第八个，那么我们后面呢，当我们再次运行到下一个断点出的时候呢，代码呢就会在这第六行停住了，好下面看效我啊我呢也是在这个PA jeson这里面呢添加一个指令，所以呢，我们只要运行NPM大就OK了。

好，此时呢，他就listen咱们的一个地址，这时候我们回到我们的这个网站啊，右键检查或者F1社检查啊，那么我们在这里呢，就调到我们的这个开发者调试工具，在这里就会亮起一个绿色图标，我们点击绿色图标，那么这个时候呢，就会打开一个这样的一个地址，这个地址呢，就是我们的一个调试啊，就是个调试。那么这里就进入调试了，首先能看到这一块呢，其实跟我们的这个CH调试，我们前端代码呢是一致的，最左手边呢，对吧，左手边是我们带文件的一些信息啊，那么中间呢，是文件的具体的内容，右手边呢，就是我们调试的一些内容了，对吧？那么现在呢，我们这里是pes这个文件，那么我们要往下继续执行，执行到下一个断点处，点击第一个选项啊，点第一个选项。OK，那么它就会在这里停住，此时呢，就会停到我们刚刚定义的那个插件这个位置，对吧？好，那么这时候我们就去看compulation，它有什么东西，那么第一种方式呢，就是鼠标移上去，那么在这里呢，就看它啊，很多很多属性，很多很多方法啊，那么还有一种方式呢，就是这里有个watch啊，Watch在watch这里有个加号，就会添加你要观察的一些变量，比如说我们要观察的这个comp回正，那么这里呢，它就会把这个comp呢观察的在这里啊写着，所以我们在这底开呢，能够很清晰的看到combination里面到底有什么东西啊，到底有什么东西。

其中呢，这里面呢，会有个sets asset呢，其实就是它的一个资源的一个情况啊，资源情况还有呢，很多属性，很多方法，诶比方说呢，我们后面呢，看到他影视原形上会有一些方法啊，可以可能会用上其中的一些方法，比方说呢，这里有个get set这个方法，Get set呢，获取资源啊，获取我们打包的资源，它要传一个，你要获取哪个资源，还有get set set呢是所有啊，代表获取打包后的所有资源等等，那么除了之后呢，还有什么艾米查S方法，诶应该是在上面啊。

埃米萨的方法，输出资源方法等等啊，它上面呢有属性，有方法，有很多东西，所以后面呢我们借助它来做事，所以呢的本质上本身呢就是个对象，对象上面呢有很多内容可以去做，并且呢，我们还可以通过comp去注册compil创建过程中的一些构S函数，所以comp呢它也有相应的whose。所以我们点开whose啊，这里能看到，诶，它有很多很多的供子函数啊，那么其中呢，我们需要用的一个公子函数呢，叫additional assets，对吧？我们来看一下它里面有很多啊，我们就印证一下这个access，因为我想做一个需求，就是我想往打包的一个输出文件中啊，再添加一个文件输出去，而声中access呢，就是在添加资源之前触发的一个构子函数啊，这一点呢，在官网中呢也有体现，好我们可以关这个最小化调试方式，是啊，那我们关掉，那么我们会看官网上，官网上呢，其实在这个这里也对combination的公hos函数也有介绍，刚刚我们看到whoses里面的公S呢，在这里都有体现，其中呢，我们可以看其中一个叫additional ass access additionals access呢是个think，是个一模的创新构子函数，它呢是为combination创建额外的额外的要输出的这个资源的一个这个钩子情况啊，所以我们要往这个呃，输出资源呢，多添加。

看一些新的资源，那么就会在additional access里面往combination里面去添加新的资源，好那么所以说呢，我们来试一试，我们添加一个资源出去看一看啊，好来这里，那么现在来的这里面呢，只是说我这个comp呢，刚刚创建啊，所以这个钩子呢，是啊初始化comp的钩子。对吧，那么我们现在要想办法呢，是要新增一个文件啊，所以呢，我们接下来要往下走，接下来呢，我们就是要想办法去添加资源，那么想办法触发那个公词函数啊，那么呢，它有个H上面呢有个方法叫additional。

叫做。对吧，那么它呢，是一个异的一个构词啊，异步串行动词，我们可以用to think。他去做一些事情啊，好，那么同样呢，他也接受一个名称，我们一般是插件名义，然后呢，接受一个回调函数，因为是type think啊type think能会接受一个call back。啊哈，参数，那么在这里面呢，只有你调个call back，那么这个工作呢才能做完了，你不定投back，那么这个工作呢，就会在这停住啊停留住OK，那么我们在这里干嘛呢？我们在这里啊，我们当我们去访问combination的时候呢，我们就发现里面的资源呢，它就不太一样了，我们在这里可以再打个第八个，我们再次调试一下。

OK，我们再看啊，在这里面打印这个C呢，它又会不一样，OK，它这里的新进入的新的调试模式，我们往下走，执行到下个断点处，好在这里停住，那么我们可以看在watch里面里面的access里面就能看到啊，它默认的要输出的一个资源叫many，好manys，这就是它默认要输出资源，所以只有进去comp里钩子函数里面呢，我们才能知道啊，它具体要输出的内容，从而呢，我们在这里面呢，可以去对这些资源呢进行操作，比方说呢，我要添加一个新的资源来看怎么做啊。完呢，添加个新的资源，就是说白了就是往那个access页面去添加一个新的资源，比如说添加一个a.TST这个文件啊，就随便添加一个啊，然后它的值呢，是等于一个对象，注意我们也看到了，其实我们刚从调试也看到了many JS呢，它只是个对象，对象上面有些属性，有些方法，其中已视元形上呢，能看到它会有个size，一个方程和一个叫做source的个方程，好，这两个东西代表什么含义呢？我们来看一下它呢，这里面呢，我们需要定义两个东西，一个是size这个函数，一个是叫做source这个函数，Size呢代表的是文件的大小啊，文件大小这样呢才能知道出来一个多大的一个文件啊。

那么source呢，就是文件的具体内容啊，文件内容，所以举个例子啊，举个例子，我要返回的内容，我在外面去定义一下，假设呢，我有个内容叫hello，对吧，叫做plug to啊好，这个内容呢，我先显示在ATST里面，那么它size呢，我们这叫return出去啊，代表它size就是content点，这是它长度，就是它的一个大小，然后呢，Source的就是内容，内容就是这个contents啊，我就returns就可以了，那么这个操作呢，实际上就是往啊要输出的资源中。

要输出的资源，添加一个这个ADTST这个文件啊输出。好，做完这个式之后呢，它就会追加进去，那么我们就要调用CB这个方法，拷贝这个方法对吧，然后呢，让单前的钩子函数呢做完，那么它就会最终输出的时候就会多一个ADTC这个文件了。对吧？好，下面我们来看效果啊，我们把前面两个都注释下，调试部分呢都注射下，我们呢把调试关掉，我们重新预行npspad，那么我们要观察的是打包输出的文件啊，那么现在的第三目录呢，它只有一个魅JS，我们都能看到，当我们运行完成之后，我们再看效果，OK，这时候呢，你们看到它多了一个a.TST一点开，诶里面内容呢，就是hello plug to了二了，对吧？所以呢，这种方式呢，就是往啊我们打包的里面呢，添加一个新的资源啊，就是这种方式，那么这种方式呢，有个问题，有个不太好的地方呢，就是需要你自己去计算这个内容啊，还有这个大小就等等一些信息啊，这样呢就操作起来不方便，这个内容呢，我是直接写死的，那么有可能啊，我们下来呢，比方说我的plug下面有一个文件叫b.TST啊，叫hello啊，比方说hello，嗯，B吧，Hello BB OK，那么在这里呢，我们看到就是我需要做事呢，就是我希望。

那把这个文件读取出来，然后把这个文件呢，也打包到Dis去，那我们来看怎么做啊，那么这个文件在这里，那我必然要读取文件，所以这里面呢，我需要用FS模块去帮助我去做一些事情，好，我们引入FS，那么FS里面呢，它是一个异步代码，所以我们可以把它改造成promise，这里面呢，用上了no的另外一个模块叫U。U to上面呢，会有一个工具方法叫做promise法，它能够将我们一个读取文件的方法，对吧？U to呢，上面有个方法叫promise法，它能将一个普通的异步函数变成一个基于promise的一异步函数，那么这个代码的意思不就是将FS点这个一不代码。

方法啊，变成。呃，基于promise风格的一部分。好，所以这个read file呢，就是基于promise风格，那么我们呢，可以在这里加一个think卡代表呢，我接下来要处理异步代码了，OK，那这个atd不变，它呢，还有第二种方式啊，我们read file呢，我们去读取一下这个文件，读取谁呢？读取我那个b.TST，那b.TST呢要写个我们建议写绝路径啊，所以这里面呢，我们还要引入一个模块叫pass啊，去处理我们的路径问题的一个模块pass OK，那么这三个呢，都是no je的核心模块，我们不需要下载。好，下面呢，我们通过pass。点法，我们来生成一个绝路径。

Get d name，然后加上我的这个BDTC，当前目录的BDTC就可以了，OK，那么它会读取文件返回值的是promise，我加上位呢，就能得到它返回的一个data了，那么这个data呢，是文件的一些具体的数据，是一个buffer啊，是个buffer数据，好，那么它这个buffer我们呢，要追加一个资源，那该怎么办呢？对吧，我要做法呢，其实就是往它上面呢，添加一个b.TST这个文件，但是呢，它的内容呢，又不能直接塞给这个data，它得变成这个结构，那么这种方式呢，就是你写成这个样子，那么这样做的话呢，就挺麻烦的啊，挺麻烦的，所以呢，外派呢，它也提供了一种方式啊，我们来写一下。我们以如下we pack pack的提供一种方式帮我们快速创建一个基于RA pack风格的一个这样的一个文件类型，啊，那么来自于外派的一个source。

Sources，注意在之前的外派四版本呢，这个派sources呢是一个库啊，而现在呢，外派五呢，已经整合到外派D的一个属性了，所以我们可以直接写啊，其中呢，这上面呢就有个属性叫roll source roll s，这roll source呢，它就能够将我们的一个data数据呢，变成一个这样的一个风格的一个对象，一个这个数据，那么这样呢，我们就可以方便一点了，对吧，我们就会不用写这么复杂了，传个data塔就OK了。就不用这样，上面这样写了，直接用一个绕S传入我们想要数据，那么最终呢，它也会提这个BTST，好，那么下面我们看效果，我们再次构建一下这个ipad。好，成功了，其实在这里我们已经看到了，它已经输出了三个文件啊，a.TST和b.TST，那么我们点开b.TST，你看这里面呢，就有我们b.TST的所有内容，所以以上呢，就是我们的一些方式啊，去打包文件对吧？要添加文件的方式，你可以用上面这种，也可以用下面这种，当然明显的上面这种的局限性比较大，因为它只有两个属性，而我们去看的话呢，实际上有很多属性的啊，就是说source呢，就能够帮我们弥补这点，所以我们推荐使用这种方式。

那么输出资源的除了这种方式以外呢，外五呢，还添加了一种新的方式，在comp里面呢，它还有一个方法叫amit，这个access。这个方法，那么这个方法呢，也可以输出一个文件资源，比方说呢，我们把这BDTST呢去注释一下，那么它也可以输出啊，第一个参数呢，就是BDTST，就是我们要输出的文件，第二参数呢，就是要输出的具体的内容，那么这个内容呢，也是要经过我们PA整理的，整理后的内容，那么这种方式呢，其实就等价于之前写set这种方式的写法啊，这两种方式是等价的，我们预习一下看效果就知道了。那么这时候呢，只要看到A，你看这里输出了这个B的TST，那么就知道，那这个是肯定是OK的啊，肯定是OK的。所以最终呢，我们要去输出个资源的方式有很多啊，如果你本身就有，那你可以直接写上你直接资源，那么一般来讲的话呢，啊，你可以用第一种，用第二种都行，那么一般来讲呢，文件是在外面，所以我们就可以用read file FS的一个模块，这个模块read file去读取这个文件，然后再输出，输出的方式呢，也有两种，一种是呢，通过access直接添加资源，第二种方式通过m access去输出资源都可以。

好了，那么这里面呢，就是我们的一个comp的一个演示啊，它呢作为对象有一些属性，有些方法，那么同样的它也相应的有一些生命周期，有些钩子函数，我们也可以使用，OK，那么这里呢，就是comp的一些内容了。