在使用 webpack 进行前端开发时，我们常常会遇到一个问题：打包后，图片和 CSS 文件的路径错误，导致无法正常访问。这个问题在刚开始使用 webpack 的时候很容易遇到，解决起来却不是那么简单。
问题分析
当我们在代码中引用图片或 CSS 文件时，通常使用相对路径，如下所示：
---- ----------------------- ----------- ----- ---------------- -----------------------
然而，当 webpack 打包时，会将所有文件打包成一个文件，这个文件通常在项目根目录下，并没有原来的目录结构。因此，相对路径就会出现问题，无法正确地定位到我们需要的文件。
例如，假设我们有以下的项目结构：
--- ---- - --- --------- --- --- - --- ------ - - --- -------- - --- --- - - --- --------- - --- ---------- --- ------------ --- -----------------
当我们在 index.html 中引用图片和 CSS 文件时，使用了相对路径：
---- ----------------------- ----------- ----- ---------------- -----------------------
但是，当我们使用 webpack 打包后，生成的文件如下所示：
------
------
----- ----------------
-------------- -----------
----- --------------- -----------------
-------
------
---- -------------- -----------
------- -------------------------
-------
-------可以看到，图片和 CSS 文件的路径已经发生了变化。这时候，index.html 就无法正确地定位到这些资源了，因此，浏览器也无法加载它们。
解决方案
为了解决这个问题，我们需要使用 webpack 提供的一些配置项。下面，我们来看一下具体的解决方案。
使用 publicPath 配置选项
webpack 提供了一个 publicPath 配置选项，可以用来设置 webpack 打包后模块的公共路径。publicPath 会在打包后的文件路径前面加上，并且会影响模块内部的相对路径。
我们可以在 webpack.config.js 中进行配置：
----- ---- - ----------------
-------------- - -
------- -
--------- ------------
----- ----------------------- --------
----------- ----
--
--在这个配置中，我们将 publicPath 设置为 '/'，表示所有资源的地址都以根目录为起点。这个配置项会影响到打包后的文件路径，如下所示：
------
------
----- ----------------
-------------- -----------
----- ---------------- -----------------
-------
------
---- --------------- -----------
------- --------------------------
-------
-------可以看到，图片和 CSS 文件的路径已经发生了变化，前面加上了 "/"，这时候，浏览器就可以正确地加载这些资源了。
使用 file-loader 和 url-loader
除了使用 publicPath 配置选项外，我们还可以使用 file-loader 和 url-loader 进行配置，这两个 loader 可以帮助我们自动处理图片和 CSS 文件的路径，使其能够正确地被打包后的文件引用。
file-loader
file-loader 可以将静态资源输出到指定的目录，并返回资源对应的 URL。我们可以在 webpack.config.js 中进行如下的配置：
-------------- - -
-- ---
------- -
------ -
-
----- ----------------------
---- -
-
------- --------------
-------- -
----------- ---------
----- ---------------
--
--
--
--
--
--
--这个配置表示，在遇到以 .png、.jpg、.jpeg 或 .gif 结尾的文件时，使用 file-loader 进行处理。输出目录为 images，文件名为原来的文件名和扩展名。
这样，我们在代码中引用图片时，使用的路径为相对路径，如下所示：
---- ----------------------- -----------
file-loader 会自动将图片输出到指定的目录并添加对应的哈希值，如下所示：
--- ---- - --- ------ - - --- -----------------
url-loader
url-loader 可以将小于指定大小的图片转换为 Base64 编码的 DataURL，而不是将其输出到指定的目录。我们可以在 webpack.config.js 中进行如下的配置：
-------------- - -
-- ---
------- -
------ -
-
----- ----------------------
---- -
-
------- -------------
-------- -
------ -----
----------- ---------
----- ---------------
--
--
--
--
--
--
--这个配置表示，在遇到小于 8KB 的以 .png、.jpg、.jpeg 或 .gif 结尾的文件时，使用 url-loader 进行处理。如果文件大小大于 8KB，则使用 file-loader 进行处理。输出目录为 images，文件名为原来的文件名和扩展名。
这样，我们在代码中引用图片时，使用的路径为相对路径，如下所示：
---- ----------------------- -----------
url-loader 会自动将小于 8KB 的图片转换为 DataURL，并且将其添加到打包后的文件中，如下所示：
------
------
----- ----------------
-------------- -----------
-------
----- -
----------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------ ------
------- ------
-
--------
-------
------
---- -------------------
------- -------------------------
-------
-------可以看到，图片文件已经被转换为 DataURL，并且添加到了打包后的文件中，这样，浏览器就可以直接从下面的打包后的文件中加载图片了。
总结
以上就是关于使用 webpack 进行前端开发时，解决图片和 CSS 路径错误的问题的相关内容。可以看到，我们使用 publicPath 配置选项和 file-loader、url-loader 进行配置，可以很好地解决这个问题。当然，在实际开发中，我们可以根据具体的项目需要进行灵活的配置，以达到更好的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65356a897d4982a6ebc5c259