07-尚硅谷-webpack从入门到精通-打包图片资源

我们要学习的是如何打包我们的图片资源。我们打开我们的这个代码，我们新建文件夹啊，叫零五打包图片资源。那么要打包图片资源的话呢，我们要写一些基本的一些结构和咱们的样式和新建S式，我们新建一个文件叫在这里面呢，我们写上一些非常基本的结构啊。打包图片资源吧。这叫啊。好，然后呢，下面呢，我们给三个盒子，三个盒子啊，比如说BOSS1BOSS2BO3。好三个盒子，到时候那么结构呢，非常简单啊，三个元素，好，我们还要为打包呢，考虑一个咱们的一个样式问题。而样式文件的写法呢，诶就三也是给这三个盒子呢，写一些一些样式啊，高宽呢，比如说100PS，然后呢，给他个背景图啊background image。

好了，那么图片给什么呢？诶，我们啊可以来看啊来看。在这里面呢，我们有一个叫做呃，PE的一个课件啊，打开这个课件呢，这里面有个image啊，有个images。图片啊，图片打开啊，这里面呢有三张图片来看啊，一个呢是Angela啊，一个是RA图片，一个是view啊三张图片其中大小呢是view，这张图片呢大概为4KB左右啊呢为74KB，那么呢为12KB。好了，那么讲这个呢，就是大家要关注一下这个大小啊，因为待会呢，这个大小呢，哎，对于我们打包的时候呢，会有一些不一样的效果。好了啊，就所谓针对这view最小啊，安A次之，RA down啊好，我们把三张图片呢引进来TRLC复制一下啊。然后在这里呢，我通过右键在文件资源管理器中显示打开这个目录，然后呢，把这三张图片呢复制上去。

好了，那么好啊，那我这里就可以写图片路径了，比如第一章呢，我们写view的路径。对吧，然后呢，Background repeat no repeat不能重复啊，在size把它大小呢，调成100%啊，调成百分百开啊。好了，那么好，那么我们呢，把这样式呢写三个啊，分别对应着BOSS2和BOS3，那么高度呢，我就分别啊增增递增一点啊，以示区分。那么第二个呢，我就用red吧，用read啊。好呢，是PNG图片啊，是PNG。那么第三个呢，我就给了。那么到这儿呢，我们就把结构和样式写完了啊，非常简单的样式结构啊。好，那么我要打包的话呢，我们要切记一定要有个入口文件，所以我还得新建个文件叫S。他作为打包的入口，需要引入的是我们要打包的资源，比方说样式啊，所以这里要引入这个样式。

啊，引入样式好了，那别的我们就不做了啊，那么HP文件需要引入吗？哎，不需要引入，它可以通过插件的自动的引入，所以我们不需要操心这个HM文件。而当我们引入了样式的时候呢，样式文件里面我们明显发现它又引入了图片啊，又引入了图片。所以我们来接下来就要写WiFi配置，诶来打包这些资源对吧，这作为入口文件的JS呢，引入了样式啊，样式呢又引入了三张图片，那我们看怎么来做啊。好，首先呢，在外面呢，新建个文件叫PA点来写配置。好了，这个配置呢，我们再来大家写一遍啊，后面呢，我们这些基本配置呢，就很快复制了啊。好，暴露对象第一个呢是entry。对吧，入口打包的入口，哎，还是这个下面的DS。第二个呢讲output输出，Output输出找对象有个file name属性。

对吧，写上输出的文件名，比如叫BDS。好，还有一个属性呢，叫pass，指定我们输出的这个目录，那么要求这个目录的话呢，我们需要引入一个啊核心模块啊，叫做pass。那么利用上核心模块的方法方法去拼接一个卷。好，再来杠杆点，那么当前文件夹的路径好输出到我们我们的必要的下面，好就OK了。然后第三个是写loader。啊Mo Rose职位数组，因为我要打包的是咱们的一个样式资源，要打包样式资源，所以这里呢，我们要写样式处理样式的。首先T检测的文件是less文件，所以是点。结尾的文件。好。然后呢，第二个就是我们要使用什么规则去处理啊，那么大家如果回想一下啊，之前的写法就是soder。

然后呢？然后呢，最后呢，是。知道吗？Let呢，负责将文件编译成CS文件，而s load呢，是负责将C这些文件里面内容呢整合到我们的JS中。然后style呢，就是从JS中找到这些CS代码，把它创建style标签，然后放到页面上生效。所以呢，需要三个漏三个。OK啊，那么我们为了处理H资源呢，我们还需要引入的插件叫。那么插件呢，需要引入才能使用，所以我这里还是要引入这个插件HTMLB啊小法。等于require。咱们这个H6。好，然后呢，插件用法呢，就是new调用啊new调用。六这插件要用啊，传一个对象在这里面插入插件的一个配置叫做。

Tablet。值呢为点斜杠SC下面的HT。那么这呢，我们就完成了对样式文件和HL文件的一个处理啊，而它本身呢，能处理JS文件，所以这三种文件类型呢，我们是不需要再操心了啊。那么这些都关掉啊，关掉关掉。OK，那么现在呢，我们就验证一下当前这个配置能不能处理图片资源，我们来执行指令。好右键呢，在这个终端中打开啊，输入指定PA回撤。好，这时候呢，你看他报错了啊，报什么错呢？诶当我这个RA偏G报错了啊，还这个real JPG报错了，还这个Angela JPG报错了啊，同个警置项里面一个这个属对我个置置。

好了，那么明显呢，我发现就是他们在打包图片的时候呢，是报错的。对吧，所以呢，我们需要去单独的对芦片还要进行处理。那么图片用什么处理呢？一样的啊，Pad呢，不识别资源呢，我们第一时间都是考虑使用咱们的load去处理我们的图片啊。所以这里面还需要加处理。好，首先看下检测图片啊。那么就得这样写。什么JPG啊，或者是PG图片或者是GIF图片等等啊，这些图片结尾的，那都用这个load处理，那么使用什么呢。我们说啊，里面放数组啊，就代表就是要使用多个，只要使用多个处理。啊，而我这里呢，其实只要使用一个都在。

就可以这样写啊，就会直接写load，加上你要说的load名，诶叫做UR啊，叫做UR。就可以了啊。那么只使用一个lot呢？就直接写个lot，违约2LOT就够了。那么漏的一个配置呢，可以通过option去配置啊，它有一些相应的一些配置要加的，比如有个叫做为八乘以1024。好，这个什么意思呢，我们来说一下啊，就是啊，这个UR在打包图片的时候呢，它不是动的输出。当发现。啊，图片大小。小于这个8KB，八乘以102就是8KB。就会被四处理。S64处理什么意思呢？就是啊，它会将图片呢，转换成一种S64编码的方式，变成一种S64码的一种一种字符。

而这个字符串呢，诶浏览器解析这个字符串呢，就会当做图片的内容去解析。好，贝斯数呢，如果你清楚的话呢，你会知道它具备这样的一些优点。优点就是呢，能够啊减少请求数量，就页面的数量呢，请求呢就少一点啊。那么减少起数量的优势呢？就在于减轻服务器压力呗。啊，因为服务器的同一时间呢，能接收的请求数量呢，是有限的啊，那我少发些请求，那我就能处理更多的一些其他请求了，所以呢，是这样的一个优点。那么同样的缺点啊，缺点呢，就是图片体积。会更大。就比方说你之前图片的是10K，转换成变成一种字符串的方式的话呢，字符串可能有13KB 14KB可能会大KB。就是这个图片体系大的问题就会来呢，这个文件请求速度就会慢一些啊。

所以呢，它有缺点也有优点，那么我们就要综合一下。那你不能说，诶，因为我为了减少一个请求数量，反而图片体积带来了一个100KB，那这样就非常夸张。啊，如果你突变体系只大个1KB2KB，诶这是我能接受的，因为这12KB呢，很小我是能接受的，即使慢的话呢，也慢不了多少。所以呢，我们一般不会对大图片进行被字处理，只会对一些小图片那么多想呢，哎，通常来讲呢，八到12KB左右的图片啊，八到12KB以下图片都进行BASE6梳理都是没有问题的。所以我这里呢，只写了个8KB，下下呢，大家应该根据实际的场景来看看你的你你项目中的小图片是怎么样的个情况啊，那再来去定这个limit。就比方说吧，就你项目中有一张9KB的图片，那你这个limit呢，就可以设置为十啊，就设置为十，或者说你项目中有张10KB的图片，那你可以设置11啊这样的。

那么我们刚好测试的时候呢，我们是有张4KB的图片的，所以我说这个八的话呢，它就会将这个4KB大小的图片呢，经过。所以待会我们来看效果啊。那要使用这个U呢，当然我们是需要下载的啊，大家注意要下载，那这里呢，我还是要写清楚啊，需要下载两个包。分别是U。还有。因为UR的依赖于去做事的，所以我们下载两个啊，不是下一个下两个，所以我们接下来下载这两个包。好，回去啊。M mi这两个包啊，Your和都得下啊，下完之后呢，我们来看效果。那我们稍等一下啊。OK，下完，那么我们来看效果啊，我们来运再次运行一下，再次运行。

再输入ipad运行。好，这时候呢，你会发现呢，它是没有报错的啊，他的打包的这两三张图片，你看angel和这个RA和这view都打包进来了，那么输出的结果呢，哎，也有两张图片，有两张图片啊，输出了两张图片。啊，诶。你看一张图片呢，是74KB，一张图片是12KB，只输入了两张图片，但我实际上引入了三张图片，我们可以看文件啊。那么还有一张图片去哪了呢？是吧，我们有了三张图片啊。还有很多同学去哪，我们看build的啊，看build d GS往下翻。啊，往下翻。我们可以看一下这三张图片，安拉JPG图片啊，我们可以往右边走一走。发是这个。对应的是这个9A4，哎，就说这个图片呢，是安两张图片，好我们再往下走。

哎，这里有张图片啊，片我们再翻啊，图片定义地址是不是13C啊13C诶对应的这张片也是这张图片的是这张图片是。那么view呢？我们来看view这张图片啊，往往右边走一走。预状图片呢，它经过了BASE64处理，变成一个非常长的，我们可以往下翻啊，非常长的一个这一个编码的一个字符串啊，一个这样的BASE64编码的字符串。那么这个字符串呢，直接放在页面上呢，它就就能进行展示这张图片了。所以这是view呢，它被经过贝六四处理，所以呢，它变成了这种字符串的形式，而不会输出成一张图片，所以我们输出的结果呢，就少了一张图片，还少了这张view图片啊，我们验证一下张图片呢，你会发现是啊，哪张图片呢？它是view的话呢，它是被啊转化成14。最后呢，我们可以打开这个index去验证一下看效果。

哎，你会发现呢，这三个图片呢，的确都正常显示了啊。好，我们可以要求检查一下这个这个内容啊，检查内容。看body。其中BOSS3呢，你看它呢，是这个安拉是安拉图片，BOSS2呢是RA是RA图片，其中BOSS1呢，它的ul呢，是个BASE64的地址啊，因为经过派处理之后呢，它变成了一个BASE64格式的编码啊。所以呢，就是这个情况。所以我们回过头来看一下啊。我们呢，要想咱们的pad处理图片资源呢，就要加上一个这样的漏洞。如果你只要使用一个呢，可以像我这样。如果你要使用多个动作呢，诶，你可以用use来处理啊，这是这一块。那么这呢，我们处理好了这个图片资源，附加图片资源，那么还不够啊。因为将来我们写图片的时候，除了在样式中引入图片以外呢，我们还可能在H中通过image标签的方式引入图片。

比如这样呢，我就通过image引入这张图片啊。对吧，一个图片。好，那image引入的图片，我们的这个load能不能处理呢？那我们来看效果。这些外派再打包一次。哎，他没有报错，没有报错啊，我们再看输出结果，哎，也还是这两张图片，那我们看一下这个INDEX6啊。好，这时候呢，你发现他路径呢，哎，还是这个路径。但是你看啊，点斜杠是相对路径啊，它是去当前目录下去找这个Angela，但这有Angela这张图片吗。我们可以很明显看到是没有的，没有的话呢，我们再去open啊，你会发现他这张图片，是的是找不到的。所以这里要说一下就是什么情况呢？就是这种处理，它默认有个问题。处理不了。HL图片。

处理变啊，默认是处立亚的啊，默认。好，因为图片呢，它根本就解析不到，所以就处理不了，那怎么办呢？诶这里呢，还得再加个load。太子什么呢？诶看我写啊看我写太子呢，这个H妙。诶，那H不是处理H文件，到底是干嘛的呢。在这里啊，我们通常通俗来讲就是什么，就是处理less UR呢，是处理我们那个啊，咱们的这个样式中的这个ul这个图片路径的问题的。那么HL的呢，顾名思义的话呢，可能我们会觉得他是处理HL文件的，哎，但其实不是啊，他专门处理的就是处理这个。H。文件的image图片的。专门负责处理这个图片，处理什么呢？啊，就是负责引入。

负责引入这个图片啊。被。进行打包处理了啊，首先你要引入，那么这个H呢，就负责去引入，然后所以U。那么当你使用这个东西的时候呢，这里还需要加一个是啊，我们可以看一下，待会会报一个错误啊，一个小问题我们可以看一下啊。哎，对啊。啊，我们这个H呢是需要下载的，注意我们要用的load呢都是要下，所以我要回到之前这窗口把这个H呢下下来。他负责处理的是我们的HM中的图片问题。所以下载H。稍等一下啊。好嘞，诶等它下完下完了OK，那我们再次运行，再次运行看效果。好了，这时候呢，还是没有报错，还是没有报错，但是我们来看这个H6啊，你看它这个FC呢，就变成一个object摸丢了。

这是为什么呢啊？就是因为啊，咱们默认情况下呢，默认情况下呢，它会使用这个啊。咱们的这个URL呢，会使用这个EL model去处理这个模块。而这个H呢，它打包之后，它引入的image呢，是common的引入。啊，Common，那它以的模块语法去解析，这个common的模块，它解析不了。所以这里面呢，需要做个处理啊，做个处理。啊，这里面有个小问题。问题呢，就是因为。啊，你可以认为ul的呢，是默认使用。模拟去解析的。而什么呢？而。这个。所以解析时就会报错。

什么问题呢？就是这个问题啊，就是这个呢，变成个object Mo啊，变成个解析有问题，那怎么解决呢？解决就是。就是关闭什么呢？关闭这个UR的model。使用common。解析就好了。Yes。为false，这个呢，就是关闭这个Mo，使用commons去解析，所以这时候我们再看啊，再看再打磨一次。啊，同样的没有报错，同样的没有报错，但是我们再去检查这个的时候，我们会发现这个这个S呢，就不再是那个object那个问题了，而是一个完整的一个图片路径，啊，完整的图片路径。

好了，那么这个长串呢，哎，我们就叫哈希值，是根据这个图片内容生成的一个唯一哈希值啊，就是这个。所以我们再去打开这个页面，你会发现这图片呢是正常的了，是正常的能够正常处理。所以回到头来，我们这里要讲几个问题啊，再回顾一下，就是首先默认情况下呢，我们是使用UR loader来去处理图片的啊，那么当然UR依赖于file，所以大家需要下载啊，需要下载两个包。好了，那么使用呢，通过limit可以对我们图片进行限制啊，小于某个大小的，我们会经过四处理。来做我们图片呢，做一些优化啊做些优化。好了，那么URL呢？问题就是它不能处理这个HM中的image图片。所以我们要引入一个HL来处理这个image图片。啊，他做的话就是把这个图片呢引进来，从而将交由这个U2的进行处理。当然引进来的时候呢，我们发现它呢，使用的是咱们common JS的规则。

所以而UR使用的是exl Mo，所以我们需要做的是让它们统一，统一怎么办呢？将ul呢？那Mo呢给关掉S，从而使用这个commons去解析，这样呢就不会出问题啊。是这个。所以到这呢，我们使用的U加HL啊，其实还有个file来解决了我们的这些啊样式，以及我们的这个HL的所有图片的一个问题的。那么后就是发现我们这个图片的这个名字有点啊这个串，哈哈。好，它呢，根据我们图片内容呢，生成那个唯一哈，其实所以这两个东西呢，是不一样的。那么我们啊，不想要这个文件这么长的话呢，你可通过一个字段叫做name去重命名。怎么写呢？看我写一下哈西取，比如十位点EST。

好，这是给图片进行重命名。哈希十位什么意思呢？对吧，哈西十位就是取啊图片的哈希值啊的前十位。对吧，点就是那个点，那ET什么意思呢？哎，它叫做文件的扩展名啊取啊文件的。原来的扩展品。就是你原来是JPG啊，那么输出之后这个也是JPG，原来是PG，就PG原来是GFGF，而前面的值呢，就没有这么长了啊，让它本身呢，可能哎有20位左右，那么这样呢，我就可以短一点，只取十位啊，只取十位我们可以再输出一下啊。好，我们可从这里看，你会发现这个大这个名字呢，明显就小了，并且呢，它生成了一个，你看两张小图片啊，那么我会对比一下，它其实就是取前面的八系值的这前十位了啊，就这样的关系。

所以呢，我们一般啊，不希望名字这么长啊，所以就会改短一点啊，名字太长的话呢，那么体积就会更大一些，没必要这么长啊，我们就取十位就够了啊，就够了。好了，那么我们最后也可以验证一下，看这个B的这个indexl sc表卡啊，我们要看构建后的这个index HL，构建后的HL我们打开再看一下效果。效果还是OK的，效果还是OK的。那么到这呢，我们就处理好了我们整个图片问题啊，使用了我们的UR加上HL的来处理啊，分别处理咱们的样式中的图片，以及HL图片中的问题。同时其实最后一句话呢，告诉大家就是我们啊，你看呢，在index中引用了一次，然后呢，在文中呢，其实也被引用了次。但打包之后呢？它其实只生成了一张安吉拉图片。所以呢，这里就是当pad在解析的时候，发现我们使用了同一个文件，它不会重复打包，它只会输出一次啊，这也是派优势就是它不会重复打包某一个文件，而会呢，输啊，而会输啊，他们认为是同一个文件而只输入一次，哎，这样呢也非常好啊。

好，那么到这里呢，我们就完成了我们整个图片的打包了。