Web前端框架通用技术 webpack5 8_使用webpack打包CSS资源 学习猿地原创

大家好，我是学学地的特约讲师高若峰，前边呢，咱们用外派打包了多个T的开发案例，那这些开发案例呢，我已经呃，每一个案例都呃保存了一下啊，这样的话，你在做实验的时候，你可以照着做，那我们这节课呢，我们来学习一下打包。GSS资源，那咱们用打包T资源的时候呢，咱们用的是插件。用的插件，这个插件。对吧，而点ipad这个插件，那打包CSS资源的时候呢，我们就得需要用到loader了，那下载它不用引入，直接使用就可以。这个，那他需要用到打包，单纯打包CS资源呢，咱先完成第一步，后边还有csi的压缩呀什么之类的一些处理，咱们一步一步来做，先把它打包，它的打包的过程是这样的，先需要把你用到的CSS这样的文件，先和我们的什么，和我们的GS文件打包在一起。这是第一步，因为它也是一个资源嘛，把它捆绑到我们JS文件中。

然后呢，第二步把捆绑到的GS文件中的这样的CS代码在我们的HTM文件里边。头里边创建一个style标签。然后呢，把这个CS代码插入到用儿TML，相当于这个方法插入到我们HTM里边，那我们HT就可以用到CSS了。是这样的一个过程，所以呢，需要两步，需要两步呢，就需要两个老一个呢是。这个。这干嘛呀，就是在。把我们的CSS文件给我们打包到JS文件里边，将来外部外部这个资源引入到JS文件中，那这个老的作用。就是创建态标签，把这个csi代码放在标签里边，然后放到HTML里边，是这样的一个过程，如果我们把csi提出单独的文件，那就不需要这个，咱一步一步来，所以呢，第一步需要这两个log，那我们需要下载这两个log对吧，然然好，这里边这些文件我们都给他，什么都给它，呃，删掉。

因为已经备份了。这个去掉，咱们还是回到最原始的。这样的方法，这也去掉。这样的话，代码结构咱们看的是少一些，对不对，把这个。也去掉，都去掉，然后在这个文件里边再改回最简单的。呃，把这个也去掉吧。嗯，我也不压缩了，也不用这个了，就把这里边的src里边的index的点文件，我给它转成。嗯，你带点加盟店，这个我们也不要了，嗯，没事，我删掉了，但是我也怎么着已经保存了。In代表JS，直接这个作为入口文件，所以呢，我们在src下边需要新建一个什么HTMR文件，叫做in，代点HTML在这里边这个是。打包CSS文件。嗯，换个行吧，简单一点。打包CS文件，然后这里边我写一个需要写一个入口文件，我们叫做index的点GS入口文件，入口文件里边咱们现在呃什么都不写，或者是答一下这是入口。

文件点rog。就行了。这个呢，就是咱们默认的最简单的一个这样的结构。来。Build里边，这里边有这个in代没压缩的对不对，然后有这个。入口文件很简单的，并且最基础的一个这样的结构，这样看起来咱不能清楚一点啊，当然这些。在这里边注释太多，因为已经保存过一份了啊，所以呢，把这些也都去掉，这样看起来更好一些啊，咱们需要的时候咱们再写，这样结目就简单了，那现在我们需要用到两个，怎么两个loader，那我们就需要npm I安装两个，一个是CSS loader，一个是style loader。RO咱说了cslo的作用是把CSS资源给我们加到哪去啊，加到呃，GS文件中，打包到GS文件里边去，对不对？那这个呢，是把JS打包好的JS文件里的样式给我们放到HT里边去，这两个过程，那他们两个呢，都是在开发的时候用的，上线运行之后不需要，所以呢，这么安装一下就行了。

那我们除了这个当然了，我们还需要一个简单的一个csi文件对不对，那我们，呃，比如说在这个SR下面都叫index，那我们这块也起一个也叫index吧，或者你叫什么都行，比如说点CSS或者点CS都行，叫。嗯吧。就是样式点CSS名称你随便起啊，那比如说起一个box，然后宽度200像素，高度200像素，颜色ID红色的。呃，背景颜色咱们是用呃绿色的对吧，随便写啊，你写多少样的都行，你写几个也都行，这都没关系啊，我就随便写一个做一个盒子，然后呢，在HTM里边我们用到这个，比如说div加这块，我起的是ID吧，Box对吧，这样的一个盒子对吧。

Box随便写一个内容就行了，对吧，但是呢，他现在这个样式文件和这个他俩没有任何关联，对吧，没有任何关联。来，我们看一下。嗯，这还没有下载完再。嗯。等一会儿，诶等待一下，你先把这些该有的结果写完，你看啊，现在呢。呃，把这个HTM文件写完了，也引用到这个样式了，但是他俩现在没有任何关联，肯定看不到，对不对，怎么样才有关联呢？那我们现在在GS文件里边可以这样用一下，比如说。只要。啊，当然这是呃，ES6的一块，咱一块吧，直接嗯，Reqqu一块直接包含什么呢？包含当前目录下的什么样式，点CSS，这样的话，我们在打包的时候肯定是从这个入口文件开始的，也就是在这块。

在哪块，在这块我们是通过入口文件先找到这个in代词的，那找到这个in代词的，这in代词里又包含这个，所以呢，它就会用到我们什么，我们的呃，Csi把我们家打包到这个internett JS文件里面去，对吧，好，已经安已经加载完，安装完了。安装完了之后，那现在它是用loader来处理的，那loader应该写在哪啊，写在这个里边。对吧，写在这个里边，那这里边处理一个这里边数组里边放多个阶层的，放多个阶层的，如果这里边我就用到了一个loader，那我直接在这里边数字里边写什么，就是RODR，因为它阶层格式嘛，Load使用哪个load呢？那我写上字就行了，比如说CSSRODR就可以了。但是我这里边用到的是多个，用到是多个loader，就不这么写了，我们这里边放一个use使用，既然是多个LOADER2个一起用嘛，我们这里面放个数组，在数组里边我们使用上，比如说style。

什么louder，然后再加上什么，再加上一个CSS杠，RODRLA，写这么两个就行了。你看这个加这个。就是呃，在这个数组里面。但是在这个数组里面。我们虽然加上了这两个，但是呢，我们前面还得有一个什么呢，有一个。什么样的文件用这两个老去处理得写规则？用什么写规则呢？用test写规则。那这会就写正则，正则呢，正则对象直接用这两个，看逗号呢，当然是对象里边的，什么是对象里边的啊。这样的一个分隔符，就是接S对象里边的这样一个分隔符，对吧？那在这里边两个分隔符我们匹配的什么？是以CSS.css结尾的，当然这个点，那么我们得转移，不然它不认识它代表任何字符了，转移它以CS结尾，后边加个高乐符，这样的话。我们就匹配所有的点csi文件都需要干嘛呀，都需要用这个把它打包到JS文件里边去，用这个把它插入到XT里边去，是这样的一个过程，这两个顺序千万别写反了，因为在规则里边我们。

在规则里边。我们顺序是从右到左，从下到上，如果我横着写，就从右到左，先执行这个。对吧，因为一定要通过这个logo把它打包到JS文件里边去。听了吗？再通过这个。把它插入到HTM里边去，是这样的一个过程，如果你写反了对吧，那他找谁往HTM插上就不行了，所以呢，记住顺序是什么，从右。正好从右到左，如果我把它是分开写的，是这样写的。就什么就是从上到下是这样的一个过程啊。

这样的话。我给它写到一行，看上去会好一些啊，所以这时候把它删掉。你看啊，让代码结构改编简单点，但是写的一行没法加注释了。在这块。我可以在这块写一下啊。从。右到左，从右到左记住这个顺序，知道了这是匹配的规则，然后用这个，如果这不有一个记着怎么写呢？对吧，有两个用用字，这样有进有值吗？如果一个直接用老记着，然后这块写CSS是这样。那比如说style c，如果有两个就用use啊，记得这样的一个规则。那我们来看一下。现在可不可以，现在我们style.cs是不是CS文件在这里边，是不是又引入了这个CS文件，那他就会通过哪个，通过这个，先通过这个对不对，把它加到我们的什么，打包到我们JJS里边去，然后再通过这个log，把它放到我们HM里边去，咱们看一下是不是这样的过程，来我们打包一下。

直行要外派好成功了，你看这里边先看一下我们这里边的慢点GS你看。咱们知道慢点JS是怎么来的吧，因为在输出文件里边，对吧，默认名不就慢点JS吗？没有指定名称，所以在这里边我们就能看到。打包的这样的一个过程，因为我这里面没没使用压缩，对不对，没有压缩。标本你看要么是文件。在这咱们往后看。比较长，拉条。

都不看了，你看一下。现在咱们看到这是不是就把它已经加到了什么JS文件里边，已经加到了JS文件里面去，对不对，那我们我们再来看一下这个音带点TML，它会用另外一个load。在这里边。慢点GS加入吧。你没有加入成功了。应带点T，他会在这块我们建一个标签的。啊，你在这我看不到，我们从这看错了。然后运行一下。在这块看不到，因为它通过这个JS文件里边记着从这文件里边给我们加载的，所以你看我们运行一下这个文件。运行这个文件，你看这样式生效了，看到了吧，然后我们F12看下原代码结构，看元素结构，你看在头里边是不是给我们插入了一个style标签，相当于这样给我们放进来的，对吧？因为它是打包到哪个里边去的，打包的是这个文件里边去的，在这个文件里边对吧。然后在运行的时候，他给我们相当于放到头部里边去了，是这样的一个过程啊。

不是说直接在这里边插入一个style标签，你看原文件在这里面，还是在JS文件里边，所以要知道这两个的作用。要知道这两个log的作用，所以呢，这块不是使用插件，对吧，咱们在转HTML的时候，咱们使用的是插件。这块使用的是这样的一个规则，记住了先要下载，然后直接使用，不用像插件一样。插件呢，我们这还得引用一下，之后呢，我们不需要引用就可以了，所以呢，通过这个CSS就可以了，那么说怎么提出单独文件呢，咱后边课程会讲，那这节课呢，咱们就先学一个最简单的打包CS资源就可以了啊，谢谢大家这节课。