12-尚硅谷-webpack从入门到精通-提取css成单独文件

接下来给大家带来的是我们的生产环境的搭建的第一步啊，对样式文件进行处理。我们来打开我。我们来新建文件夹啊，零九我们要做的第一件事呢，就是提取CS单独文件。好，那么我们来写一点这个代码啊代码。好在这里面呢，新建一个文件夹JS啊，代表我们JS目录。然后再新建文件夹，叫做CS，代表我们要写样式代码的地方。好，JS文件中呢，必须要写一个入口文件，应该写JS。好，这里面我们主要关是样式，所以呢，我写多个样式文件吧，比如写个t1.c。好，这是我们第一个样式文件啊，或者叫a d g ss吧。好压缩文件呢，比方说里面那个。Box啊。一半。招100啊，然后给白色background color一个pink。

OK啊，那我们再新建一个吧，我们就以两个为例啊，再来个对面的那个boss。前面是BOSS1，后面是BOSS2啊，我们就这样去做。换的连板啊，找两半白光子看了。MYPI。对吧。OK，那么接下来呢，我们在这个。入口文件中呢，把他们引入进来。点点啊CS下面的a.CS。还有这个b.CS。好，引进来之后呢，我们还要最后写一个文件来验证它到底可不可以生效啊。好五来。好在这里面呢，我们写两个盒子啊。IDV81。啊，第二个ID为BOSS2。好那么好，那我们的结构，哎，JS呢，其实没什么写啊，只是引入了样式文件样式呢都写好了。

那么接下来呢，我们要写我们的配置了啊，写配置。好，那么我们开始写配置来。向外暴露出去。一个对象，对象呢有一个参数ENT啊，我打包的入口是一个JS文件。它的目录呢，应该是SC下面的，J下面的。第二个是输出啊，输出到哪呢。我们的目录要统一啊，第二个是。它呢，要输出到JS目录下的BJS。啊，出现的目录。好，第二个呢是pass pass路径呢，要个绝对路径啊，要用个法杠点加上我们的。好，那么这儿呢，我需要引入这个方法引入。它呢，来自于我们的一个核心模块pass。

好，接下来要写我们的解析样式的load啊，Module里面的Rose，去写解析样式的规则。好，这些解析样式呢，非常简单啊，写个T啊，他们检测的东西呢，叫斜杠。CS这个文件啊，EXCS结尾的文件。好，然后呢，接下来呢，就是要写个use规则来去解析它啊，分别是tyo。和我们的CS。好，最后呢，我们需要去处理这个啊HM文件，所以还需要引入个插件。插件的一个HTML。We。Bla。好，这里面呢，写个template。只为SC下面的这个H。好，那么这插件呢，需要引入啊，一定要切记。

好了，那么接下来呢，我们啊，可以运行一下代码看一下效果啊，运行代码看效果好其人乐关了啊，我们来看一下。好，现在呢，我还没有提取啊，我们现在是验证的是之前的一种写法，看一下它会变成什么样子。好，当然啊，这里还要说这个模式啊，大家别忘了mode为development。啊，就我们就没development啊，我们现在还是development，现在呢，后面再来改啊，后面再改。那么我们来看一下这标的下面的内容啊，我们再构建一次啊，再构次。好，打开是JS。那么它同样呢，这个样式文件还是在这个JS中，因为我没有看到亚数文件输出啊。

好，它是有样式的存在的，好，但是现在问题是这个样式文件还是我们的这个JS文件中。好怎么办呢？诶这时候啊，得下载一个插件去提取啊。这差距叫什么呢？来，我们下一下啊，叫mini。啊。然后呢，这个。这能插件啊。这插件呢，就能够提取CS成一个单独文件啊，这个插件我们来复制一份。好在上面呢写的注释。当然，这里采用小大头的命运法啊。好，那么就是这样的一个插件啊，就是这样一个插件。好，那么这个插件呢，我们要注意啊，它这里面呢，应该暴露出去的内容呢，是我看一下。

哎，是它啊，就是它好OK，那么我们呢，得到它了。那么它怎么用呢？来看它插件用法呢，都是一样，取电用。当然还不够啊，还不够，我们这里要注意就是我们要提取CS成单独文件。好，当你经过load之后处理之后呢，这个样式文件就到JS中了，Style呢是创建一个style标签啊，让我们的东西呢插入到页面上，我还是把这两个他们的做法还是要写一下。的做法是。它会创建。来，我们写在上面。创建这个style标签。然后将样式放上去。好，C是将文件。

整合到。JS文件中。就这个大概是这个意思，好，但是所以我们这里啊，我们是要它整合到JS文件中之后呢，再通过这个处理，这个插件处理，然后呢，把它变成一个单独文件，要做到这一步，那么这style呢不能要啊，这style呢不能要。在这里要加一个load，这个load呢，叫做mini CS啊。这插件用法呢，稍微的不一样一些啊，一定要注意它上面呢有专门有个。好，那么这里我们写的注释啊，这个。取代这个。取代，然后呢，作用就是。取这个的啊。那么单独文件就这样的，所以呢，这style不能要了，因为我已经变成单独文件了，那我就不需要再创建什么style标签了，就没必要了，所以style去掉，得加上这个load。

好那么好，那么现在我们来验证一下，看行不行啊，我们来预习一下。好，并没有报错啊，并没有报错，我们来打开这个代码文件看一下。这时候你会发现这个标下面呢多了一个文件叫man点。再打开这个D中看啊，它会自动引入打包生成的这些资源，你看这个link标签就引入到这个。啊，就在这儿啊，已经赢了。好，那么这里面呢，就是对这个文件的打包呢，就是进行处理，那我们再来看啊，再看这个里面，CS里面，它里面呢，就将我们刚刚那个a.CS和CB.cs里面内容呢，全都加载进来了。好，那么最后呢，我们看效果看行不行啊，右键open。它同样呢，样式也是能出来的啊。所以我们最后来看一下，就是我们一共呢使用的一个插件，哎，加上一个loader，加上这个插件上面自带的loader，能够将C文件呢给单独提出来。

好，那么这里有个小问题，就是我希望目录结构是一样，它输出到CS目录下怎么办呢？到时候这里就可传参数了啊叫。Name啊，叫file name，然后你要输入CS，就CS下面的，比如man.CS或者说叫标点CS啊。就黑了。叫name啊，对于我们输出的文件进行重命名啊。好，这时候我们再看结果，再看结果，哎，我把必要的呢先删掉啊，防止之前的值呢干扰我现在的内容删掉。好，当然了，要删掉，之前呢，我要把这个东西给关了。OK。好，我们再再再来一次啊。

好，再勾成功，这时候你看到B的下面呢，就会多一个CS目录了，CS里面呢，就放着这个B给CS。所以咱们这啊，就是给这个文件呢，进行重命名的啊命名的。好，这时候我们再看啊，这个路径呢，也是没有正没有问题的，能够正常的修改。之后打开看效果。效果呢，还是一样的。好，那么这样呢，不一样的地方就是啊，我们将来的样式啊，是通过这个link标签引入，而不是style标签，所以呢，不会出现我们所谓的这个闪屏现象。并且呢，CS文件和JS文件分隔开来了，所以呢，JS文件的体积也没这么大啊，那么解析速度呢也会更好一些。所以呢，这里面呢，我们做的是就是加S呢，单独提取出来单独文件。好，这里面用上了一个插件叫mini。那么这里插件呢，分为两步啊，首先需要new调用使用意思，第二个呢是要取代teo，在这里作为一个loader去使用。

注意使用差距的。好那么好，那么到这呢，我们就处理完毕了。