Webpack 是一个非常强大的打包工具，可以将前端代码中的所有资源文件都打包到一个或多个文件中，进而减少 HTTP 请求的数量和页面加载时间。然而，在使用 Webpack 进行打包时，有时候会遇到图片路径错误的问题，这是因为 Webpack 在打包过程中会把所有资源的路径进行重写。为了解决这个问题，我们需要进行一些配置和路径的处理。
问题分析
在使用 Webpack 打包时，图片路径错误通常表现为无法显示或加载图片，或者控制台中显示类似于 Image cannot be found 或 404 not found 的错误信息。这是因为 Webpack 会对图片文件进行重命名，并将它们放到一个不同的位置。而我们的前端页面中引用的图片路径还是旧路径，因此无法正确地找到图片文件。
举个例子，假如我们有一个 index.html 页面和一个 logo.png 图片文件，它们的目录结构如下：
src/ ├── index.html ├── img/ │ ├── logo.png
然后我们使用 Webpack 进行打包，我们希望将所有文件都打包到 dist 目录下：
dist/
├── index.html
├── assets/
├── images/
│ ├── logo-81435e52.png在打包后的页面中，如果我们还是用旧的路径引用图片，那么就会出现无法显示或加载图片的情况。因此，我们需要找到一种方法来解决这个问题。
解决方案
解决 Webpack 打包后图片路径错误的问题，有多种方式。本文介绍两种较为常见的方式。
1. 使用 file-loader 或 url-loader
Webpack 提供了 file-loader 和 url-loader 这两个 Loader 来处理图片文件。它们可以将图片文件拷贝到输出目录，并重命名为带有哈希值的文件名，然后返回这个文件的新路径，以便在打包后的页面中正确地引用图片。
使用 file-loader 的配置示例：
-- -------------------- ---- -------
------ -
-
----- -------------------------
---- -
-
------- --------------
-------- -
----- ------------------------
----------- ---------------
-
-
-
-
-使用 url-loader 的配置示例：
-- -------------------- ---- -------
------ -
-
----- -------------------------
---- -
-
------- -------------
-------- -
------ -----
----- ------------------------
----------- ---------------
-
-
-
-
-上述配置中，我们将处理符合条件的图片文件，并通过 name 选项指定新的文件名，最后将图片文件输出到指定的目录中。
如果使用 file-loader，图片文件将直接拷贝到输出目录中，并返回相应的文件名，而使用 url-loader，如果图片文件大小小于 limit 选项指定的值，则将图片转换为 base64 格式，并将其直接嵌入到打包后的页面中。如果图片文件大小大于 limit，则会将图片文件拷贝到输出目录并返回相应的文件名。
2. 使用 html-loader
html-loader 可以将 HTML 文件中的 src 属性和 href 属性的值一并打包进单独文件中。这样，当你使用 Webpack 打包的时候，就不需要手动改变这些属性了。如果你是通过 Webpack 引入 CSS 文件，其中包含了图片，那么这个方法就非常适合你。
使用 html-loader 的配置示例：
-- -------------------- ---- -------
------ -
-
----- ----------
---- -
-
------- --------------
-------- -
--------- -----
------ ----------- ------------
-
-
-
-
-上述配置中，我们指定处理 HTML 文件，并在 attrs 选项中传入需要处理的属性和值的列表。这样，Webpack 就会将每个 HTML 文件中指定的属性和值打包到一个单独的文件中。
总结
Webapck 打包后图片路径错误，是 Web 开发中常见的问题之一，但也很好解决。这篇文章介绍了两种常见的解决方案，即使用 file-loader 或 url-loader，以及使用 html-loader 来处理 HTML 文件中的属性和值。通过这些方法，我们可以轻松地解决 Webpack 打包后图片路径错误的问题，让页面的显示更加顺畅。
示例代码
示例项目地址：https://github.com/markfangchao/webpack-image-demo
示例项目目录结构：
src/
├── index.html
├── index.js
├── img/
│ ├── logo.png
│ └── header-bg.png
└── styles/
└── index.css使用 file-loader 配置：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- -------------------------
---- -
-
------- --------------
-------- -
----- ------------------------
----------- ---------------
-
-
-
--
-
----- ---------
---- ---------------- -------------
-
-
-
--通过 file-loader 引入图片：
<!-- index.html --> <img src="./img/logo.png" alt="logo" />
/* index.css */
body {
background-image: url('../img/header-bg.png');
}或者：
// index.js import logo from './img/logo.png'; const img = new Image(); img.src = logo; document.body.appendChild(img);
使用 html-loader 配置：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- -------------------------
---- -
-
------- --------------
-------- -
----- ------------------------
----------- ---------------
-
-
-
--
-
----- ----------
---- -
-
------- --------------
-------- -
--------- -----
------ ----------- ------------
-
-
-
--
-
----- ---------
---- ---------------- -------------
-
-
--
---------- -
----- ----
-
---- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- --------------- --
-------------- ------------
----- ------------------------- ---------------- --
-------
------
----------- ---------
---- -------------------- ---------- --
---------- -- --- ------- ---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493a0e048841e989413fee5