Web前端框架通用技术 webpack5 10_提取CSS为单独文件 学习猿地原创

大家好，我是学习园地的特约讲师高若峰，上节课呢，咱们用外派打包了Les和S这样的一个资源。那在上上节课呢，咱们也打包了CSS资源，那不管是打包的这个哪种资源，那么我们都是通过什么，通过这个loader loader怎么着打包完把这个CSS通过style loader。插入到HTML的还的头里边，对吧，以style标签的形式插入的，也就是我们的。呃，这个隐形价。你看。都是通过。头里边对吧，跟我们建的style标签，把我们这三个样式插入进来的，然后带着里面才可以使用。那这种方式呢，我们属于内联式的GSS，对不对，那么我们平时在写项目的时候呢，CSS呢，都做成单独的文件，都做成单独文件，所以呢，我们有的时候也需要干嘛呀，当然这样我们已经可以工作了，但是咱们去优化可以更好一些，干嘛呀，就是把这个CSS，不管是呃CSS文件还是LIS文件，还是SS文件，那我们把它提取为单独的文件，那提取单独的文件呢，我们就需要使用这个插件。

通过这个插件。当然了，咱们都知道。使用插件，咱们在打包人天的时候也用过插件对吧？插件呢，就这三种方法，就什么下载引入，然后使用这三步来做成了，不像loader咱不用引入对吧，那这个我们需要引入，好那我们既然需要使用这个插件来完成，那我们第一步肯定干嘛呀，第一步就是什么下载对吧？来我们使用啊听一下屏幕。N PM install对吧，下载什么呢？下载我们的这个插件，粘贴一下就成了。重新粘一下这这个。我敲一下吧。NPM。Install叫mini mini的CSS啊。

TRT，然后PLPL插件ugin。看一下对不对啊。根号ext SD这个杠。D安装先下载这个插件，下载这个插件，那么我们就需要干嘛呀。在我们的，呃，这个配置文件里边，既然下载是插件的用法，那我们就干嘛得在这块像这个插件一样，我们得引入。只要呃，Re qqui引入我们的这个插件啊，我这的是回车这一行，这把它敲一下吧，Mini这个插件。在工具里面下载完之后，它有提示啊。然后呢，我们把这个插件。把它做成一个。Cost一个常量。但常亮不支持这种格式的缩写，所以呢，我们用驼峰命名法。把心去掉首字母大写。

当然，你可以随便起名，叫什么名都行，但叫这个名了，一看就知道用的是这个插件，对不对？那引入进来了，引入进来的时候呢，那我们想使用这个插件怎么办呢。想使用这个插件，像HM一样，在这个里边对吧，在插件里边我们只需要用一下这个。插件就可以了。这样的话我们就使用这个插件了。那现在我们就可以提取单独的一个文件了吗？想象一下，咱们先编一下外，肯定不行啊。你看编一下。成功了没问题了，那就能把我们这个给我们提出来了吗？不能，为什么呢？因为我们用的是style loader，他还是给我们创建的什么，创建的这个加入到这头里边，因为我们用的loader还没有改变，这个loader还在用，还是给我们插入到这个头里边。刷新一下你看。在头里边还是这么插入的，看到了吗？那我们得把它既然是单独的文件对吧，我们先把这个给删掉。你看啊，我们再编一下。

怎样它变成单独的文件，然后呢，单独的文件里边，再把单独的文件给我们插，使用link这样的一个，呃，标签给我们加到RM里边，这样才可以，所以呢，我们需要。加S文件，我们需要在哪啊，我们需要将这个style。我们将它换掉。一块复制一下啊。复制一下，然后这个。我把它注释一下。注释一下，让你看到这样的一个区别，你看原来的是使用这个，那这块变了，变成什么呢。把它换成我们这个插件的load m这个插件，然后呢，点。这就可以了，这样的话就会把我们的CSS这个给我们换掉。就是style这个老板给我们换掉啊，把这个，那它就不是说，呃，不是生成style标签插入到头里边了，而是独立的一个文件插入在里边，来我们看一下。

这回我们再编一下外派。好，这个我们来看一下，这里边你看多了一个慢点csi文件，然后把这个文件插不到这里呢，你直接看这个。你看就直接能看到有这个标签，看到了吧，亮标签慢点CSS，那其他的两个。咱们还有那个，呃，S转换的，那s class转换的呢，它一样，因为那两个没有动，还是使用style标签，只是这个我们换成这个。对吧，那如果其他的也想换成独立的这个文件，你看啊，也想换成独立的文件怎么办呢？那同样我们只需要换哪啊在这个地方。同样把这个换成我们这个load就可以了，你看换成。这个这个同样我们也把它换过来。就可以形成独立的文件了，现在我们在打包编译，编译打包一下。你看。

没有形成多的一个文件，那一个文件呢，是不是把这三个CSS打包在这一个文件里了呢？那我们点开看就知道了，你看原来是一个，现在把三个都打包在一个文件里了，打包在一个文件，那在我们这里面。邀请一下。你看就变成这一个头里边就一个没有另外两个style标签了，那一样可以有这样的效果。那他说那我不想用这个名字曼CS，我想用自己的这个名字怎么办呢？可以，你只需要在参数里边。在参数里边写上fell name，跟我们T这一样，Fell name在这块写上这个，然后里边改成自己想要的。名字就可以了，当然了，这个名字也可以指定目录，比如说CSS目录下的什么什么对不对，那我们就随便写吧，就是demo.css就可以把这个慢点CSS给我们换成带入的CS。加不加分号。来，我们再编一下。

你看在这里边。给刷新章就会出现一个单CSS对吧，里边打包的内容也是这样的，那在我们这个。打包的文件里边就会变成单的CS包，我们自动用标签引入。对吧。那三个文件，那我能打包三个不同页面用不同的。想象一下我们能不能试试对吧，我们这个地方用什么。路上。Name。试一下把这个删掉啊。好，我们再打包一下。看这里边可以吗？不可以，这块是慢点CSS，因为指定名字不对，看到了吗？指定名字不对。这个呃，处理CSS，呃，形成多个文件，你现在是合并的，一般我们用合并的，那处理多个呢，咱们还得需要其他的插件来帮我们完成，那在咱们后边再讲CSS优化的部分，因为到后边要把消除多余的GS代码，除多余的CSS代码的时候，咱们到那个时候用到插件的时候，咱一起来说，那这块就先不说了，好这节课呢，我们就先讲到这里。