图片文件处理

图片文件处理

图片文件处理 – 资源准备阶段

首先，我们在项目中加入两张图片：

一张较小的图片test01.jpg(小于8kb)，一张较大的图片test02.jpeg(大于8kb)

待会儿我们会针对这两张图片进行不同的处理

我们先考虑在css样式中引用图片的情况，所以我更改了normal.css中的样式：

如果我们现在直接打包，会出现如下问题

图片文件处理 – url-loade

图片处理，我们使用url-loader来处理，依然先安装url-loade

修改webpack.config.js配置文件：

再次打包，运行index.html，就会发现我们的背景图片选出了出来。

而仔细观察，你会发现背景图是通过base64显示出来的

OK，这也是limit属性的作用，当图片小于8kb时，对图片进行base64编码

图片文件处理 – file-loade

那么问题来了，如果大于8kb呢？我们将background的图片改成test02.jpg

这次因为大于8kb的图片，会通过file-loader进行处理，但是我们的项目中并没有file-loade

所以，我们需要安装file-loade

再次打包，就会发现dist文件夹下多了一个图片文件

图片文件处理 – 修改文件名称

我们发现webpack自动帮助我们生成一个非常长的名字

这是一个32位hash值，目的是防止名字重复

但是，真实开发中，我们可能对打包的图片名字有一定的要求

比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复

所以，我们可以在options中添加上如下选项：

img：文件要打包到的文件夹

name：获取图片原来的名字，放在该位置

hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位

ext：使用图片原来的扩展名

但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确

默认情况下，webpack会将生成的路径直接返回给使用者

但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/