在 Webpack 开发中，我们经常会遇到打包后图片路径不正确的问题。这个问题不仅会影响网站的正常运行，还会影响前端开发工作的进展。因此，解决这个问题是非常重要的。本文将详细介绍如何解决 Webpack 打包后图片路径不正确的问题。
问题背景
在我们使用 Webpack 进行开发时，如果没有进行正确的配置，那么打包后的图片路径很可能不正确。例如，我们在 HTML 中引用了一张图片：
<img src="./assets/images/logo.png">
由于 Webpack 打包时会将所有的代码和资源都打包到输出路径指定的目录下，因此，我们可能期望打包后的路径为以下路径：
dist/assets/images/logo.png
但是，实际上，打包后的路径可能是：
dist/logo.png
这时候，图片就无法正常显示了。
解决方案
方案一：使用 file-loader 和 url-loader
我们可以使用 Webpack 的 file-loader 和 url-loader 来解决这个问题。这两个加载器可以将图片资源转换为 base64 编码或者复制到输出目录中，并通过相对路径引用图片。安装 file-loader 和 url-loader 两个加载器：
npm install file-loader url-loader --save-dev
然后在 Webpack 的配置文件中进行如下配置：
-- -------------------- ---- -------
------- -
------ -
-
----- -------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------
----------- -----------------
----------- -----------------
-
-
-
-
-
-其中，test 表示匹配的文件类型，use 中的 loader 表示使用的 loader，options 中的 limit 表示图片大小的限制，name 表示输出的文件名，outputPath 表示输出路径，publicPath 表示资源对应的公共 URL。
这里使用 url-loader 将小于 8192 字节的图片转换为 base64 编码，并将大于 8192 字节的图片复制到输出目录中。
方案二：使用 CopyWebpackPlugin
除了使用 file-loader 和 url-loader，我们还可以使用 CopyWebpackPlugin 插件将图片资源复制到输出目录中：
-- -------------------- ---- -------
----- ----------------- - ------------------------------
-------------- - -
-------- -
--- -------------------
--------- -
-
----- --------------------
--- ---------------
-
-
--
-
-从上述代码中可以看出，我们需要配置 CopyWebpackPlugin 插件的 patterns 属性，其中 from 表示源目录，to 表示输出目录。这样做可以将源目录下的文件直接复制到输出目录中。
示例代码
以下是示例代码，仅供参考：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
---- -------------------------------
------- --------------------------
-------
-------// index.js
import './assets/css/style.css'
import logo from './assets/images/logo.png'
const img = document.createElement('img')
img.src = logo
document.body.appendChild(img)-- -------------------- ---- ------- -- --------- -- ---- - ----------------- -------- ------------ ------ ---------- ----------- - --- - ------ ------ ------- ------ -
-- -------------------- ---- -------
-- -----------------
----- ---- - ---------------
----- ----------------- - ------------------------------
----- ----------------- - ------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- -------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------
----------- -----------------
----------- -----------------
-
-
-
--
-
----- ---------
---- -
---------------
------------
-
-
-
--
-------- -
--- -------------------
--------- ------------------
---
--- -------------------
--------- -
-
----- --------------------
--- ---------------
-
-
--
-
-总结
本文介绍了解决 Webpack 打包后图片路径不正确的问题的两种方案。无论是使用 file-loader 和 url-loader 还是使用 CopyWebpackPlugin，都能够很好地解决这个问题，使我们的项目可以正常运行。
在实际开发中，我们可以根据具体需求选择合适的方案。如果图片资源比较大，我们可以使用 CopyWebpackPlugin；如果图片资源比较小，我们可以使用 file-loader 和 url-loader 进行转换。可以采取灵活的策略来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460a355968c7c53b024a2d7