笔记：配合 Vue.js 配置 Webpack（三）处理图片

第一种情况

src/ 文件夹中没有需要的图片文件，所有图片都是直接放在了 dist/ 文件，这样的情况下，比如 main.scss 中：

这里直接运行 webpack，就会报错：

发生了什么？

基本就是我们告诉 webpack，去编译 main.scss，webpack 就去编译了，但当处理到 background 属性的时候，我们给的值是一个 url，因为我们想引用一张 image 作为 background-image，但是 webpack 按照我们给予的 url 去找，结果没有找到。

怎么解决？

方案一

比如说这是一个 legacy project，文件的链接已经固定了，那么最简单的办法就是，使用绝对路径（absolute path），css-loader 就会彻底忽略这条链接。

方案二

如果这是一个非常大的项目，那么可能就会有很多很多文件路径，要把所有相对链接修改成绝对链接会非常麻烦，这个时候就需要修改 webpack.config.js 配置文件，告诉 css-loader 不要去试图编译任何 url。 css loader 文档中相关选项：链接。原来 .scss 规则就需要作出对应修改：

{ option: { url: false } } 会做一定的转换，或者说 fallback，比如如果有这样一个属性定义： background-image: ./images/test.png，通过 url: false 转换的结果就是：background-image: images/test.png，在这里 ./ 就被自动过滤了。不确定有没别的自动 fallback 转换，暂时只观察到这一个。

方案三

使用 raw-loader，raw-loader 顾名思义，就是告诉 webpack，css 我需要的是怎么样的，我已经写成了什么样，不要对它做任何操作。使用 raw-loader 的时候 webpack 就把导入进来的 css 当做了字符串，任何编译都不会执行。

第二种情况

以上是 images 文件已经在 dist/ 文件夹的情况，基本也就是在处理一个 legacy project 的时候遇到的比较多。但是，what if 开始搞一个新的项目的时候，images 本来就是在 src 文件夹中的呢？ 这时候就需要对文件做处理，需要使用到 file-loader 来对 image 文件来操作，如下的文件结构中：

在 webpack.config.js 添加相关配置：

这里做了什么？

1. 检查是否是 .png 文件；
2. 是的话使用 file-loader 来进行处理；
3. 将 .png 重命名为 [name].png 的格式，并且存放到 dist/ 下的 images/ 目录。