05. 尚硅谷_自动化构建工具webpack_打包图片.avi原创

好，咱们开始上课，那么这节课呢，我们主要是针对哎图片这一块，对图片去进行啊打包处理，那么对图片进行打包处理呢，我得需要两张图片，我呢直接从我写好这里面，把这个文件夹拿过来，放到我的src下面啊，我呢直接在他的文件夹里面给大家看一下，你可以看一下这两张图片有什么区别。注意看看哪。第一个图片它是80KB啊，那你再看一下这个。6.49KB，我为什么要选这两张图呢？一个图片是大于8KB的。一个图片是小于8KB的，哎，我们刚刚提到一个概念，就是说使用URL load，它小于8KB的图片是不是以BASE64的形式打包到哪呢？GS里边，那现在这个图片我们有了，接下来呢，我去添加一点样式给大家看一下来，我就放到这个下面。

这个样式呢，是两个ID，也就是说我除了设置一个宽高以后，注意看这个是干嘛的，我是不是引入一张背景图面啊，而这个背景图就是打开一个logo，一个贝，分别对应是我这两张图，这些对于咱们来说不难吧，好，引入这两张图片，那我刚刚是把已经把图加载，图片对应的loado已经写好了，那这个时候呢，你可以在页面这去设置了，页面我应该是要两个，应该是叫div是吧。BOX1BOX2，那我在这去换一下BOX1，走，你再来一份，把这个换成BOX2，好，那现在我们面临的问题就是需要重新去打包处理。

然后呢，在这去执行一下backpack啊，打包处理，有没有发现这个东西越来越多，越来越多，就是因为你。主模块这是不是引入的东西越来越多，好来打包已经完毕了，已经完毕了，这个时候我们先来看，呃，你会发现我生成的GS下边有一个这个东西。你点开看一下，是这个美女这个图片。然后你还发现少了一张图片。那个图片哪去了呢？少的那张图片是刚刚是六点几KB的那个图片，它是不是小于8KB啊，其实它现在在哪，在这个GS里面啊，在这个里面，我刚刚好像看到他了，就在这儿。那这个时候你打包完了，很有可能你想去运行页面，我是不是需要看一下答案，这个时候我打开页面，你会发现有一个问题。

有一个问题，有什么问题呢？这个板块是不是少了一张图啊，然后你去检查一下啊，检查一下看conso log，我们刷新一下，你会发现他找这张图没找到，注意了，你看这个AB3，哎，B3这个东西。是不是就是这样，为什么它会自动找这张图呢？而不是找我原来的这个贝点意味着。这个就是它vpa内部的原理，你之前是叫贝GPA，它打包完是自动起成这个名字了，它内部知道也是我在加载的时候，我加载也是去加载这张图片。可是他没找到，为什么没找到，我们来分析一下，你现在什么在当前的页面里去找那张图。而我现在这是不是只引入一个GS文件啊，很明显我这张图片在我的GS之外。

所以他找不到很正常。而这个问题呢，也是在网上被热议的一个问题，就是我使用URL loader，哎，去打包图片的时候可能会出现的问题就是它。如何去解决这个问题啊，最起码你应该有一个常识，你会看这大家看这样这个错误提示，他是说我是不是去第层的下臂去找这张图找不到，你看一下这个关系是什么，在我当前页面去diss的下面去找。那是因为哎，我fact在HTLHTL它有一个特点，他找资源找不到，他是不去当前所在的文件夹下去找。没有，那既然它有这个特点，它会自动去自己当前的文件夹下去找，那我能不能想办法把它。放到这儿。

放到这儿的意思是他这一次去当前的文件夹下去找，能不能找到呢？是不是能看到他？能懂我的意思吗？你根据刚刚的报错不就是这样吗？他是不是自动去他自己所在的文件夹下去找这张图片啊，那我就专门把它挪到这个GS里面，但是这个时候你要记住这路径你是不是得改。改完以后，接下来我再去打开一次，你会发现诶。这个美女，这个图片是不是就有了。哎，这是一种解决方案，这也是最简单最神秘一种。哎，我现在大家说通常我们都会用这种方式。通常都会用它，再给你们讲一种方式，我把这个函数挪出来，挪出来以后我这本应该是加在GS下面的它吧，这样肯定是找不到了，那么你在PA这个配置文件中，注意看在哪配置呢？这是不是有个output。在这我可以去加一个属性叫PA lake啊。

好，我先加个逗号，要不然它后面又报错，能逗号就添加一个KY6吗？啊，这个public pass我可以设定为我当前index提供服务的，哎，地址在哪，从他的角度去出发。你看他现在文件是不是在这儿，他去自己的地的下面是不是找不到，那我应该告诉他怎么去找呢。你是不是应该去GS下面去找，那在这我就可以去设置一个它。设置一个它，那这个时候你呢，去重新打包编译一次，好打包完了。然后我们直接在这儿重开一个吧。找你。这是不是就能加载到，哎，这是一种方式，但是我不推荐大家用这种方式，那是因为哎他这个。

在设置哎为index.html提供资源服务的时候。带有强制性。意思就是说，只要我设置了这个属性以后，我一代在找资源，我都会去GS下面去找。当前肯定是没有任何问题，但是它会影响你之后要用的一个叫热加载工具。我们昨天在用杠的时候，最终是不是实现一个全自动啊，Vapa里面也有全自动加载，自动化加载又叫热加载，这也是一个概念，叫热加载。哎，我们当下啊，推荐大家还是把这个放到这里边之后你会知道为什么会这样。到这儿大家能不能听懂啊？我呢，先把这个视频。