04. 尚硅谷_自动化构建工具webpack_打包css文件.avi原创

来，咱们接着来讲，那这个配置文件也有了，我们现在是不是有个入口，有个输出了，接下来我们去对哎CSS进行打包编译，那么然后我们还要找一个对片去进行打包编译，那么CSS以及图片这些文件one派本身加不了，那么你应该是提前先去下载它对应的loader。注意看我上边这个要下载的两个都是针对的是CSS文件。而下面这要下载的loader，一个file loader，一个URL loader，这两个是针对我图片的loader，那么我们就一块先给它下载下来来。你们完了最好是不要看这啊，其实你要保证你自己能去官网上找到这个，其实这个呢，就是官网上拿过来的啊，但是要自己学会去找好我呢再把去哎加载我图片这些load，我让他去下载下来。

好，有了这些以后啊，有了这些以后，你那些loader是不是要去使使用它，要去使用它，我呢先去大家看着啊。这不是src吗？我把这两个收起来，一个data，一个GS了，那现在我再去给他借一个CSS文件。文件夹，然后呢，在这个里边我们来一个啊。test.css在这呢，我们给他写一个样式吧，来一个body，比如来一个background。来个rap。我现在只是写了一个，给body添加一个背景色。然后呢，你这个包内现在这个样式有了，你最终你得干嘛。

怎么去应用它呢？记住了，当前我们CSS文件也是一个模块，既然你是一个模块，那么最终你都要汇集到。主模块，也叫入口文件。来，我去写一下A。到这我先停是为什么，大家说我之前这些东西是不是相当于是定义一个变量去接收它，然后在我当前的文件里面使用啊。那你说样式这个东西，我需要定义变量吗？你定义变量，你告诉我你去哪使用它。样式是不需要定义变量，你只负责把它引入进来就OK了，一旦说引入这个模块，我是不会自动读取这个里面的样式啊，它会自动哎对应着在你页面的结构上去生效。能懂不？那这个时候我，哎，我把这个样式我给他引入进来了，接下来我就去执行一个mappa，然后你会发现报错了，那你们来分析一下哪边报错了呢。

看哪上面。一直上边这其实没问题到哪出问题到第三个，然后这这不是告诉你错误是在哪test.css里面吗。哎，test.css里边在这个里边。啊，你看啊，他说模块是不是加载失败啊，这说不是被期望的标识，那是因为我wepa加载不了你的CSS模块，这个时候我们怎么办呢。需要对应的loader来登场了，对不对，大家看我们刚才这些loader咱们是不是下载下来了，好，Loader下载下来了，如何去用它呢？来再教大家如何去使用。

你往上翻往上翻，这是不是有load啊，就拿我们刚刚是不是要整个CS，这是不是有用法。用法，这其实只是就教你是什么在外pack里面如何去配置它就OK了。OK了，你看这。这是对象，注意看这现在是不是多了一个配置叫modu啊。这个配置我们核心概念的第三个叫模块。而在这个里边这个module我看一下啊。CSS loader，哎没问题，但这他这个配置我怎么感觉有点，哎对的，看这这是不是有load啊，我先问一下大家这个rule，你们知道这个单词什么意思吗？

Rose通常是表示规则，注意看它后边是一个数组，那是因为接下来所有loader的配置都得放到这。然后我们看里面这是不是一个单独的对象，大家看test后边这些东西你们肯定学过。这叫什么？你看到这样。正则吧，哎，正则，那你看一下在这我是去利用正则匹配什么东西啊。先问一下他Dollar是什么意思？以什么什么结尾，哎，你再回头看前面是不是以点CSS结尾啊，请问这个杠什么意思？哎，很好，转一再问一下呢，在正则里面以什么什么开头，怎么写？是向上的这个尖尖的括号对不对？好，那上边这一步是我去匹配所有以CSS结尾的文件，说白了咱们是不是就找设置样式的文件啊，一旦匹配了，那么我就去使用，注意看。

这两个东西。这两个东西是不就是我们刚刚下载的那两个loader。能懂不，而这些用法你只要找到它就行，不需要呃自己去敲啊，呃那样的话效率太低了，那同样我在我的这个教程里面，大家看是不是跟我刚刚官网上那个一模一样。好，我直接拿过来啊，拿过来然后放到我们的配置，这放到哪了，一个入口一个输出了，现在再往下，这个里边专门是去配置我们的loader的。Load的，这是第三个概念，但是你会发现我比它多了一个，是因为我在数组里面多了一个对象。哪一个对象你也能看懂？原理是一模一样的。

这个是匹配什么？这一看是匹配图片的吧，PNGGIF。当是他们的时候，我是不是使用这个URL loader，哎，我刚刚是不是下载下两个loader，一个叫file loader，一个叫URL loader，其实你单用file loader已经可以去加载你的那个图片了。这为什么说使用URL，这也我也给大家说明了一下啊。URL loader其实就是在fairer上面的一个上层的分装，相当于是他的一个语法层。又提到语法的概念。URL本身只能是单纯意义上的去加载图片，而我的URL多了一个功能，大家看我这是不是有个options，这是一个配置选项。什么意思啊？限制8192我先说一下，当你使用上URL，首先你得知道它离不开fair load。

你说你必须前提是不是下载下load，是直接使用URL load它有一个好处是，它可以将小于8KB的图片以BASE64的形式。打包到GS里面，这是他厉害之处。BASE64编码知道不？听说过贝斯64编码也是一个字串吧？它可以把图片转换成字串，打包到你的GS里面，也是你根本看不见这个图片。不需要你去看店，为什么要这样做呢？你引入一个图片，是不是也要发一次请求啊，那我打包到GS里面，我是不是相当于少发了一次请求。哎，这是它的好处，注意了，我强调了一下，它是小于8KB的图片。

才能去打入，为什么这样说呢？这有8192，那我现在问一下8192的单位应该是什么？对不对？为什么这样说？哎，有的不是八吗？为什么8192，你算一下1024乘以八。就是8192，哎，单位记住了，以后在你们这儿的单位都是1024，嗯，但是这个东西其实可以是往那调的，人家推出来说是8KB，我看到有的人会这样讲。其实你用这个你没有多大用了，就是人家本来设置就是8K米，你也可以往那去调啊，可以往那去调，我呢直接把这个配置拉到我们当前的这个啊，PA conflict GS这个选项里边。好，那有了这些以后，我再去打包一次，再去执行一下刚刚的命令，再回车。

大概还会报错吗？是不是不像刚才那样报错，是没有办法去加载这个模块啊，这有三个隐藏的文件，那是因为就是。他那些文件你看我我想想。我刚是不是执行个PA，它应该是有一个配置属性叫呃，Display，然后呢，有一个杠models，我看一下能不能出来。有没有发现这个隐藏的模块出来了，哎，就是添加一个属性啊，叫display models，你怎么知道我去添加哪些属性呢？你上来不知道也说你没有这个配置文件的时候，你就可以执行ipad。大家还记得我刚刚下载下来，我是说来测一下有没有这个命令吗？那这个时候我看一下有没有，他能不能我也不知道啊，刚刚太阳步呢，哎。通常来说，一些工具都配置一个什么杠杠的属性。

因为我们是不是上面有可能不知道用哪些，用哪些这个配置属性啊，它里面都有说明，你之前翻一下翻一下。我刚用的是一个叫呃，Display modus，是不是就是它，哎，这不是说display even exclude modus in outut在输出，这就显示出来你那些隐藏的模块。这些东西都是擦边球，倒是不难，倒是不难，那现在给大家说一下这两个loader到底都是干嘛的？现在发挥作用的什么这两个啊。我呢先给大家把CSS load注掉，注掉它，我呢重新去执行一下webpack。去打包一下。你会发现报错了，其实报的错跟刚才是一样的。这你看还是说模块加载失败吧，你或许需要一个loader去处理这些文件的类型。

那我把CSS load重要了，它是不是就加载不了CSS的文件了？那说明CSS load只负责去加载你的CSS模块。然后呢，我把CSS loader打开，把谁loader注掉，然后呢，我把之前的GS文件吸取删掉它，删掉它，大家看一下啊，我重新去构建一次。诶，你会发现CSS打开的时候是不会报错的。不会报错的，因为它加载模块成功了，然后GS文件什么生成了，注意看有什么CSS文件吗。没有，那你说在哪呢？在这个GS里面，你可以去搜一个base。64这不就是他吗？哎，这是我刚才说的，哎，你们可以看一下，这有贝斯64我。

答应我之前不是说让你装这个吗？有没有看到这个图片倍数六四。就来这个吧，不理了。这就是转到转成BASE64编码格式。有点大是吗？这就是为什么要限制它小于8KB，因为我这个图片本来就很大。你图片太大的话，你看看这多长，能懂不？你们这个东西装了吗？呃，下来装一个挺好用的，这样的话，这不就是倍64吗。变成64的编码格式啊。好，嗯。贝斯64最早是用于什么？就最早的时候，你比如我可以转成BASE64，很明显和我之前的内容什么不一样。最早是为了说加密，那个时候你比如说我们有用户名啊，有密码，我是不是先给它转换成被人六四啊，发送给服务器是为了防止发送的中途被人拦截了，你的用户名和密码是不是就被人看到了？

但是BASE64这种编码格式不安全。不安全啊，为什么很容易被人家哎，在逆向的在还原。后来呢，又出了一种加密格式，叫MD5。MD5，大家听过吗？也听过，也只是听过，上网去搜一个MD5的算法，它只是一个函数，里面有一些逻辑可以，感兴趣可以去看一下，MD5推出来的时候，它要比BASE64要安全的多。是因为当时MD5在推出的时候说了，啊，他是，呃，你要逆向去破解我MD5转化完的编码需要50年。我先说一下它里面的原理啊，MD5就是有一套独特的算法，一个是加密，一个是解密，而加密这个通常会放到浏览器端，它需要发，或者两头都放都没关系，这一头加密完了，数据发送给另一端，另一端呢，接受利用提前设定好的解密的方式，再去把它反向转出来。

啊，然后呢，他当时吹嘘说，你谁要破解我得需要50年。结果还没到五年，发现网上一些黑客到能给他印象，姐就是大神，绝对的大神。那些黑客是很牛逼了。其实。我以前还看过黑客自传。听课自传特别传奇那些互联网人。之前有个应该是澳大利亚的一个小孩15岁，亚马逊这个网站你们听过吗？他是在13岁过生日的时候，他爹给他买了一台计算机，他当他特别感兴趣，自学编程。应该是在13岁，就快14岁的时候，他无意中就加了一个黑客的群。然后在里边啊，就看别人发的各种代码，各种自己去研究。

然后呢，哎，他其实是那个群里面最小的一个黑客，当时人们都嘲笑他，你这小屁孩不应该来这儿。然后他就呃呃自己去研究，研究完他就发了一个誓，他说我要攻击一个网站，要一战成名，让大家都必须认可我。他目标就是亚马逊，亚马逊其实在国外很大的。然后他是第一次，他其实是什么，他先去攻击了一次，导致亚马逊那个网站大概是瘫痪两个小时。损失已经很大了，损失很大呢，大家都在找这个人，什么国际刑警啊，这乱七八糟人。找不到，然后当时这个小孩在黑客那些论坛上就说是他攻击的，别人都认为他在吹牛逼，真的都认为他在吹牛逼。他还在上学，然后到15岁的时候，他又在论坛先发一次时候你们等着，比如说今天早上九点，哎，我还要再攻击一次亚马逊，然后他就写了一段编程，相当于是个定时器，到九点开始攻击他，就他八点多就出门上学了，结果到九点真正的亚马逊又瘫痪了，当时瘫痪的时间还挺长，损失肯定上映了上多少亿。

制造。嗯，然后后来当警察去家找的时候，就发现一个小屁孩啊，15岁，当时就他一战成名，就是后来。这这些人其实一般来说是不会吃牢饭的。肯定不会，那都是人才啊人才，你国家要是不吸引人家的话，人家跑到外国去再去攻击你的话，你受不了。哎，他后来写了一个叫黑客自传，上面有提到他。特别厉害。那就是MD5这种，刚刚我们说了MD5加密，其实现在还有公司在用。啊，一般数据要求不是太严格的，完全可以用MD5去搞定的。然后后来又推出了一种叫啊呃，我就是我们接下来要学的叫哈希值。

哈西纸听过吗？哈。代表一个唯一的值，哈希值是它原本出来是什么？将一个任意长度的二进制字符串转化为一个较小长度的固定长度的二进制字符串，它也是有一套算法，而且这个是不可逆的。不可逆的。但是我每次你比如说我的名字，哎也这有我每次转换为的字符串是固定的。就是那一个，也就是我以后只认识我转换完以后的这个标识也是一串，通过这个串来对比之前的信息，也说别人即使截获了这个东西没有关系，第一不可逆，第二你根本不知道我转之前是什么东西。哎，所以说会用到这个哈希值，因为它的唯一性，我们通常会应用到这个URL里面。

那来触发浏览器去添加一条浏览历史记录，现在你们还没到学习那个阶段啊，我们就看这了。好。找到哪就打包图片，这刚刚打包完图片了，我呢先把我的页面打开给大家看一下，现在你需要去link什么CSS文件吗？不需要，那是因为我的CSS现在在哪放着。是不是在这个GS里边啊，一旦加载了GS，读取到当前那些CSS的数据，它会自动去应用。然后我打开这个页面，你会发现没有那个所谓的背景色为红色。是什么原因呢？你可以去检查一下，首先我先确认一下，我这儿根本没有报错。然后第二点，我刚是不是给body添加伦比景色啊，看一下有吗？没有，那你再看一下hand里面有有style吗？

是不是也没有啊，那接下来大家看着我把当前这个style标签给它打开。打开以后我呢，重新再去构建一次，看构建完了这个时候我去刷新一下。这应该是没反应过来。这是不是出来了，哎，出来了有点亮眼啊，往上调调，那现在很明显，我这是不是有背景色了，Body告诉大家在哪，你看看hand里面这是不是有个style，多了个标签。那你现在知道我的是干嘛的不？CSS只负责去加载我的CSS模块，但是他没有办法将加载到的样式应用到我当前的页面。而style loader呢，可以把你CSS loader加载的样式什么动态的去添加到我汉里面的style标签中，一旦添加到这儿，那么我的样式肯定就要生效。

能懂不，嗯。好。那这呢，就是我们啊打包也是CSS文件啊，它的一些套路再往下写也是一样的，来，我先把这个视频再听一下。