过程：test匹配到图片（jpg格式、png格式的图片等），匹配到之后用file-loader处理。
原理：直接将图片复制到build或dist 文件夹下，然后进行重命名。

image.png
image.png
直接使用 file-loader（不配置属性） 处理图片资源的一个弊端：图片被放到 build 文件后，图片名字被重命名了（md4算法，默认），那这样的话，就不知道之前的哪张图片对应build下的哪张图片了（不清楚对应关系了）
image.png

对打包后的图片名进行重命名（默认是md4算法）

设置 file-loader 的属性-占位符，来解决上面的问题。（将打包后的图片名字进行自定义）
image.png
image.png

设置文件的存放路径

因为图片都放在build文件夹下会有点乱，所以我们在build下新建一个文件夹，比如img，将所有的图片都放在该文件夹中。所以，我们也需要在webpack.config.js 中指定打包的文件放在指定的文件夹下。
① 在重命名的图片名称前直接加 “img/”即可（常用）
image.png
② 或者通过 outputPath 属性来设置输出到哪个文件夹下
image.png

总结 - 对打包后的图片进行重命名和设置图片的存放路径（最终解！！！）（这个也是vue的写法）
image.png

vue-cli打包图片时的图片名称自定义、打包后的图片都放在img文件夹下这些设置，跟我们这里设置的是差不多的