在前端开发中，我们经常会使用 CSS 来美化网站的样式。而在 CSS 中，图片也是一个非常重要的元素，我们会使用 background-image、url() 等方式来引用图片。然而，当我们使用 Webpack 进行打包时，由于 Webpack 默认只会处理 JavaScript 文件中的模块引用，如果不进行特殊处理，那么 CSS 文件中的图片引用就会出现问题。本文将详细介绍如何使用 Webpack 处理 CSS 文件中的图片引用。
问题的产生
在 Webpack 中，通过 file-loader 或 url-loader 等加载器来处理图片是非常常见的做法。这些加载器会将图片文件打包成一个模块，并返回图片的路径。在 JavaScript 文件中，我们可以通过 import 或 require 来引用这些图片模块。例如：
import image from './image.png'; const img = document.createElement('img'); img.src = image; document.body.appendChild(img);
在上面的代码中，我们使用 import 引入了一个图片模块，并将其赋值给了 image 变量。然后，我们创建了一个 img 元素，并将其 src 属性设置为 image 变量。这样，在浏览器中打开页面时，就会请求 image.png 并将其显示在页面上。
但是，如果我们的图片是在 CSS 文件中引用的，那么就无法通过 import 或 require 来引用图片模块了。例如：
body { background-image: url('./image.png'); }
在上面的代码中，我们将背景图片设置为 image.png。如果我们不对 CSS 文件进行特殊处理，那么 Webpack 就无法正确处理这个图片引用。这就会导致在打包后的文件中，背景图片无法正确显示。
解决方案
要解决这个问题，我们需要使用 url-loader 或 file-loader 来处理 CSS 文件中的图片引用。这两个加载器都可以将图片文件打包成一个模块，并返回图片的路径。但是，由于 CSS 文件中的图片引用和 JavaScript 文件中的引用方式不同，所以我们需要对这两个加载器进行不同的配置。
配置 url-loader
首先，我们来看看如何配置 url-loader 来处理 CSS 文件中的图片引用。在 Webpack 的配置文件中，我们可以通过 module.rules 来配置加载器。我们可以为 CSS 文件设置一个专门的规则，在这个规则中使用 url-loader 来处理图片引用。
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- --------- ---- - --------------- ------------- - ------- ------------- -------- - ------ ----- --------- -------------- ----------- ---------- ----------- ------------- -- -- -- -- -- -- --展开代码
在上面的代码中，我们为 CSS 文件设置了一个规则，这个规则的 test 属性为 /\.css$/，表示匹配所有以 .css 结尾的文件。在这个规则中，我们使用了 style-loader 和 css-loader 来处理 CSS 文件，并使用了 url-loader 来处理图片引用。url-loader 的 options 属性中，我们设置了以下几个选项：
limit：表示当图片的大小小于等于 8KB 时，将图片打包成一个 base64 编码的字符串，并将其内嵌到 CSS 文件中，否则将图片打包成一个单独的文件。这个选项可以有效减少 HTTP 请求的次数，提高页面加载速度。fallback：表示当图片的大小大于limit时，使用file-loader来处理图片。outputPath：表示将图片打包到dist/images目录下。publicPath：表示在 CSS 文件中引用图片时使用的路径。由于 CSS 文件可能被打包到不同的目录下，所以我们需要使用相对路径来引用图片。
使用了上面的配置后，我们就可以在 CSS 文件中使用 url() 来引用图片了。例如：
body { background-image: url('../images/image.png'); }
在上面的代码中，我们将背景图片设置为 image.png，并使用相对路径来引用这个图片。
配置 file-loader
除了使用 url-loader 处理 CSS 文件中的图片引用外，我们还可以使用 file-loader 来处理这个问题。和 url-loader 不同的是，file-loader 会将所有的图片都打包成单独的文件，并返回这些图片文件的路径。这样，在 CSS 文件中引用图片时，我们只需要使用相对路径来引用这些图片文件即可。
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- --------- ---- - --------------- ------------- -------------- -- -- -- -- --展开代码
在上面的代码中，我们为 CSS 文件设置了一个规则，和上面的例子类似，这个规则的 test 属性为 /\.css$/，表示匹配所有以 .css 结尾的文件。在这个规则中，我们使用了 style-loader 和 css-loader 来处理 CSS 文件，并使用了 file-loader 来处理图片引用。
使用了上面的配置后，在 CSS 文件中引用图片时，我们只需要使用相对路径来引用这些图片文件即可。例如：
body { background-image: url('../images/image.png'); }
示例代码
为了更好地理解上面的内容，我们来看一个完整的示例代码。在这个示例代码中，我们将创建一个简单的网站，并使用 Webpack 来打包这个网站。在这个网站中，我们将使用 CSS 来设置背景图片，并使用 url-loader 来处理这个图片引用。
目录结构
在开始之前，我们先来看一下这个示例代码的目录结构：
-- -------------------- ---- ------- - --- ---- - --- ---------- - --- -------- - --- ------- --- --- - --- ------ - - --- --------- - --- ---------- - --- -------- - --- ------- --- ------------ --- -----------------展开代码
在上面的目录结构中，我们将源代码放在了 src 目录下，打包后的文件放在了 dist 目录下。其中，src 目录下包含了一个 index.html 文件、一个 main.js 文件、一个 main.css 文件和一个 images 目录。在 main.css 文件中，我们将使用 url() 来引用 image.png 图片。
index.html 文件
首先，我们来看一下 index.html 文件的内容：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------- --------------- ----- ---------------- ---------------- ------- ------ ---------- ------------- ------- -------展开代码
在上面的代码中，我们引入了 main.css 文件，并在页面中显示了一个标题。
main.css 文件
接下来，我们来看一下 main.css 文件的内容：
body { background-image: url('../images/image.png'); }
在上面的代码中，我们将背景图片设置为 image.png，并使用相对路径来引用这个图片。
main.js 文件
然后，我们来看一下 main.js 文件的内容：
import './main.css'; console.log('Hello, Webpack!');
在上面的代码中，我们使用 import 引入了 main.css 文件，并在控制台中输出了一条消息。
webpack.config.js 文件
最后，我们来看一下 webpack.config.js 文件的内容：
-- -------------------- ---- ------- -------------- - - ------ ---------------- ------- - --------- ---------- ----- --------- - -------- -- ------- - ------ - - ----- --------- ---- - --------------- ------------- - ------- ------------- -------- - ------ ----- --------- -------------- ----------- ---------- ----------- ------------- -- -- -- -- -- -- --展开代码
在上面的代码中，我们指定了入口文件为 src/main.js，输出文件为 dist/main.js。在 module.rules 中，我们为 CSS 文件设置了一个规则，使用了 style-loader、css-loader 和 url-loader 来处理 CSS 文件中的图片引用。
运行示例代码
现在，我们已经完成了这个示例代码的编写。接下来，我们可以使用以下命令来运行这个示例代码：
# 安装依赖 npm install # 打包代码 npm run build # 启动本地服务器 npm start
在浏览器中打开 http://localhost:8080，就可以看到我们的网站了。在这个网站中，我们使用了 CSS 来设置背景图片，并使用 url-loader 来处理这个图片引用。如果一切正常，你应该能够在页面中看到一个带有背景图片的标题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c593fccf1e9924e1d4d394
