07. 尚硅谷_自动化构建工具webpack_插件使用.avi原创

来，咱们整完这个热加载了啊，整完这个热加载了，我们接着再往下看一下，我们现在这个配置里面这些东西每次都有点起，大家看。我四个重要概念，一个入口，一个出口，我在这个model里面是配置load了，还有最后一个什么插件，我们没没用啊，那插件的话也简单，插件的话你占有插件列表，官网上选中这个以后，这都是各式各样的插件。各式各样的插件，比如说我接下来我马上要用一个叫它，你可以点击一下这个插件，一点你看它都有教程，第一步是教你去干嘛。这个时候先去安装啊，安装完插件下边就有一个基本的哎用法，大家看这些东西是不是咱们已经有了。入口和出口有了吧，先来看上边这，我看看你们自己能不能看到这一幕是干嘛。

引入插件没有问题，你看他如何去使用呢，你首先你得去干嘛，是不是去配置它。这没问题吧？配置放在了拉，这是我们的核心概念里面的第四个叫插件，而且我问一下你引入的这个家伙是个什么东西啊。哎，你看它下边使用是不是去利这个加法，哎，其实这些插件最终用法都是去拗它，哎都是去溜它，大家下来用哪个可以去看一下，哎可以去看一下，那知道了这些以后，那我们就回到教程里面，回到教程里面。首先你看我这，我这是去下载两个插件。这没有任何问题，N题M1到，这不是两个吗，中间隔开了一下，哎来哎，有的同学可能会差一这个老师这个不应该是放到最后边吗。不管你是杠杠C还是杠G那种，我放在插件的前边和后边是一样的。

不影响，那都不，哎，这个不影响啊，好来复制一份，然后我再去拖一个窗口吧，停了它吧，或者是。走你我去下载一个。好，插件下载下来了，要使用我们应该是第一步先考虑什么。是不是要引入它，那引入这个过程倒不难啊。我呢，Cost相当于是定义了个什么。常量打卡啊，他官网上写了个W，我只是在这什么换成cost引入了以后htmlpa plug，还有个叫利呢PA plug啊。引入了以后，你就去使用它，那么这个时候使用的时候呢，哎，我这需要去一个配置，这其实就是官网的一个配置。

你是不是得在一个的配置里面去写。这为什么是数组呢？你看官网上这是不是也是一个数组啊，因为他这介绍的时候是不是放了一个，而咱们用的时候，大家看我直接就把这两个直接全拉过来了。为什么是数组，是因为我是不是很有可能使用多个插件啊，这个时候所有的哎谬这个过程都放在这个数组里面。先来看第一个插件，给大家说一下它可以干嘛。Htmlpa，它可以根据一个模板页面去生成一个新的页面。注意里边我是不是添了个配置对象啊，表示什么意思。是不是模板的意思，后边是要指定我要根据哪个模板，大家看我刚刚是不故意把这个家伙挪到外边了，挪到外边以后，也就是说现在我要用这个插件来根据当前的页面去生成一个新的页面。

待会告诉你们它会自动放到哪，注意当前这个页面，我们现在是不是有两个div有个它。咔，我先把这个script删了，它我只只留，只留了一个div啊，只留一个div，好，我们先来看这个家伙那。这个时候我先去打包一下，注意看我现在第一次的下面是不是空的。这没问题吧，走你。然后点击一下它。你会发现这多了个什么。这两个文件是本来就会打包生成的，而刚刚这个index是不是它新生成的一个页面啊，点开这个页面你看一下。哎，这个页面有什么特点，大家说。

这个页面是在我原来模板页面的基础上，是不自动加了一个script的标签。而且你发现没有我这个页面自动的和我其他的静态资源是在同一个目录下。那这样的话，你看人家是不是自动引入的，就是当前。路径下的GS。现在我问一下大家，我打开这个页面还存在我之前那个图片路径的问题吗？我之前为什么说建议大家放在这儿，那是因为你右上模板页面根本都不用做这个操作，它是不是自动的给我放到这了。所以说哎，我们打开这个就不存在那些文件路径找不对，因为我所有的图片是不是都在这个下面，跟他在同一个目录啊。所以说我们在这儿，你看我这个public pass，我在这是住掉的，不用怕。

现在知道这个产品是干嘛的吧？没听懂什么。没事来再讲一遍，来，咱们还是或者说做的狠一点，我是不是直接可以把谁删了。现在D是不是也没有，没有的话大家看我之前在那写了个页面，这个页面呢有HTL结构，但是我是不是没有script的标签。好，然后我们在这呢，用了一个插件，我给他写了个配置对象，有一个属性叫template template这个单词表示的是模板的意思。他后边要放一个路径，你看这个当前路径是谁啊，我不PA，当前路径不就是跟木木吗。然后我是不是找到的是这个页面啊，也就是说我这个插件的作用是可以根据一个指定的页面生成一个新的页面。就这么简单。

就这么简单，然后。你去打包来勾进一次，那这个时候点击一下，这样什么生成的就是我的静态资源。这一步的操作正好响应的时候，官网上上来的。第一句话，这个页面。最终是不是整合的就是这个静态资源。那生成它以后，这些东西我们之前就能想到了，哎，GS里面放置的是我们CSS呀，小于8KB的图片呀，GS呀，这个是不是大于8KB的图片啊。但是在我们以前的认识，是不是应该是没有他的？那现在是不是多了一代HTM，哪来的？不就是根据这个模板页面生成的吗。你注意看它里面这些东西不是跟跟照根据我这个是拿过来的吗。而这个插件还有一个功能，这个功能是最关键的一个功能是它会自动为生成的新页面添加标签。

而且自动是不是引入我当前静态资源的这个GS文件。呃，这一点要理解是因为以后你们在上最后上V的时候，Wipad还要去扩展，那现在讲你们接触不到那个时候呢，这个东西啊你。肯定能看到他。就是说我默认的去下载一整套班排的配置，里面自动就有这个家。那个里面你经常能看到有个模板页面里面就有个div啊div这有个井号APP，然后带一个script的标签。就是模板页面生成的。好，那这它是第一个插件，我们还有一个插件，大家看这个。Clean clean什么意思啊？是不是表示清楚的意思啊，我通过clean wepa这个插件可以删除指定目录下的所有资源。

也是在你重新你这儿是不是有可能重新打包编译。当我去打包一执行pad这个命令，我是不是要读这个文文件啊，一旦说我这个文件读到这的时候，它会自动找什么，找你后边传入这个参数。它是一个数组，数组里边你放的是指定的文件名，哎，我一看list，那么我会自动先给你把list list下面的所有资源先删一遍。删完再去打包新的。我现在这样执行ipad，大家可能看不出来他删过。你可能看不出来是因为它覆盖了。怎么证明呢？看着。我之前第的下面应该是没有它吧，我是不是故意给它添加一个，那这个时候你看着啊，如果说我再执行一个wepa，你们说有什么后果啊，有什么现象。

他是不是把第一次这个目录全删了，创建了个新的，而这个新的里面应该有他们。来，我们来看一下，找你。点一下你会发现那个test没有了，没有是因为它在刚才的过程中已经把你原有的Dis都删了，那你的test肯定是不占了，能懂不？哎，这是生成的最新的哎，其他的插件用法也类似啊。到时候大家用什么插件都得去用它啊，至于说用什么功能，那得根据你们的实际开发需求来谈它。到这儿能不能跟得上？行，那接下来自己把这个列一下。