day04【项目前端相关基础知识二】/15-尚硅谷-谷粒学院-前端技术-webpack打包css文件

咱们啊开始打包CSS。也就是说呢，我们最终这个帮点JS里边，就是这个文件中不仅有JS代码，还可以包含CS代码里边，里边都可以包含进去啊，就是不管是JSSCS里边全有，咱给他打包成一个文件，那咱看怎么打包啊，我这里写下啊，首先里边的。第一步，因为咱要打包CS，所以咱们先创建一个CSS文件里边就是写这么一个样式的这么一个内容，就是让他有个样式，为了大家一会儿看效果，那我现在写个文件啊，咱在这里边，我还是在src下边。创建一个CSS文件，比如我起个名字又叫style.cs啊，名字随便起，但是它需要是个C文件，然后在里边我们写个样式，比如说我就随便写一个啊，咱来一个叫。Body底啊，就是页面中整体部分body底，然后body底里边呢加个样式，比如我加上呃，加一个比较常见的样式啊，应该是这个东西叫back color。

这样式我觉得各位应该都知道啊，Background color是不是就背景颜色呀，那背景颜色比如我随便来一个啊，咱就来一个红色吧，Read啊，这个是咱们写的一个简单的样式啊，为了咱有效果就可以了。就算C3你不熟悉，这应该能看懂背景颜色给我们的整体这个页面给它变成一个红颜色啊，这个一个样式，大家给他写了这么一个，为了一会儿测试啊。然后这个写完之后，第一步做到了，下面咱做它的第二步操作，那第二步怎么做呢？写一下啊，咱就需要在我们那个慢点DS里边。啊，men.s里边引入你的CSS文件，把文件给它引进来，也就是说我们刚才呢，在men JS中引入了common，引入了us，现在再用一个就是我们的CSS文件。

啊，CSS文件给他也做一个引入，引入方式跟上面一样，加一个叫快。然后这块里边加上这个叫做点杠加个style.cs把这个给他引进来啊，就是对应的，我这里写到的就是。下边啊，写到的就是这个东西啊，给它点进来，然后这引的时候有一个特点，各位注意啊，咱刚才提到了这S的时候呢，这个可以省略，但是CSS不能省略，因为它默认找的是JS，而不找CSS，这个后缀名不能省略，这各位注意啊，这是我们说的第二步，在这里边就是man.JS中引入你的CSS文件。啊，这一步我们做到了，大家知道啊，这是第二步。然后这一步做到之后，下面我们进入到第三步。

然后第三步干什么呢？因为咱要用CSS做这个就是包括它的打包操作，所以咱需要安装一下CSS里面那个就是一个加载器或者一个转换器啊，Csi那个加载的工具，需要把它装上，那咱们看一下啊，装的方式还是用这个NPM，就把这个load加载器嘛，样式CS加载器装上，这个咱需要做到。啊，那我现在咱就装下啊，这咱写成第三步了啊，我笔记中是课件中的第一步，这里写成第三步一样的啊，这步都要做到就可以。那咱们装一下啊。CS在里边把这个回车，它会联网去下载，这个就是CSS那个加载器，就是load和c ss load把这加载器加下来啊，这是我们要做的第三步，然后这里边提示没有错误它就可以了啊，这警告可以忽略，现在已经成功了。

第三步，我们就这么来做。啊，这大家知道啊，然后这步做到之后，下面我们进入到第四步。第四步干什么呢？咱就需要修改一下那个web pack那个配置文件，在配置文件中咱需要给他加点东西，就是咱们刚才啊这些关掉，刚才呢，我在里边建了一个叫web pack。Conf.JSP文件咱在里边呢，需要给它再加上一段内容啊，这是它的第四步，那加什么内容咱看一下啊，不需要个位记，咱加就可以了，我这里要强调啊，这个内容呢，你并不是把这个复制就可以了，它里边一个特点啊，因为你注意啊，我这里边加了省略号，也就是说呢，之前里边的内容是不能变的，这不能改，咱要多加内容，然后加什么呢？我们加的就是这段内容。就加这个model这部分，因为之前加内容里面都包含，比如output里面都有啊，只是我这里边是简写，所以你的做法就是在里边output后面加个逗号，然后把这个复制过来啊，这是用到就是咱刚才下载的加载器，把这个加过来啊，加到它的后面，这注意啊，别把它直接覆盖，之前内容不能少，咱只是多加了一段model这个内容。

把这个加进去啊，这各位注意一下啊，因为之前有同学就是他把这个这些复制过来，然后最终效果不好使，因为之前内容不能去掉的啊，你只是多加了这个内容。这是我们说的第四步啊，修改它的配置文件里边啊，就是这个东西。我把这个啊给大家，我就直接啊复制过来啊，这是配置文件中的这个内容。啊，就这些啊。所以咱们给它加上了啊，然后这个调完之后，咱这些步骤就完成了，最后呢，咱用这个命令重新执行一下，就来看一下最终效果啊，最终咱重新执行，看最终的结果是怎么样的啊。

那我们最后试一下啊。那现在这里边呢，我为了明显把之前文件先删掉，因为咱要多了内容把这些删掉。删掉之后，用我们刚才那个命令，就是web pack杠杠mode，然后development啊，用它做一个打包，那我现在回车咱给他就打包一下啊。大家看啊，这很快就出来了，然后你看打包日志中多了一个叫CSS啊，这样的话就可以了，然后都打包之后，咱在页面中这个文件引入了，而这页面这个文件中其实包含了咱们的样式文件里边应该都有，那我现在看效果，因为咱们刚采取的样式咱都看到了，我就加了个背景色是不是红色，那么看结果啊，比如咱们刷新是红色啊，咱这配色不好看啊，但是效果是可以了。啊，这样的话我们就做到了啊，关于这个CSS打包啊，就是这个过程。

所以咱们啊，把这些都做到了啊。就是外派的使用。然后这个过程中呢，就是在我的笔记中啊，还有一个地方啊，就是这个地方我这里写的特别写出来啊，咱们打包呢，可以用这个命令这么做可以，但还有一种方式，这个不要求啊，咱大概看一下啊，就是你还可以这么做，在package这个这里面加上一段话，然后用这个命令也可以打包，这两种方式都可以啊，咱们用这种就足够了，就用它打包，这个咱就不演示了，因为后面也用不到啊，后面用的话也都是直接这种方式啊，给大家知道一下啊，就是你看文档中知道这是另外一种方式啊，你也可以自己试一下，过程都是一样的啊，就是你加了一句话，然后给他执行是一样的啊。这是关于外派。所以说啊，到这里咱就把这个web pack的过程，我们就最终演示出来了，它是一个打包工具，把你的多个JS或者CSS文件打包成一个文件，在一个文件中包含我们的所有内容，然后咱一使用啊，里边都可以做到啊，咱效果也都点出来了。

包括啊得有输出，然后有那个颜色。啊，比如说刚才咱们看到颜色这些都有啊。这是我们提到的啊。