在前端开发中，我们经常使用 webpack 打包工具来管理资源和构建项目。然而，在使用 webpack 进行项目打包之后，有时会出现一个问题：html 中引用的图片、css 路径不对，导致页面样式丢失或者图片无法显示。
这个问题的出现是因为 webpack 打包后，所有资源的路径都被修改了。解决这个问题需要对 webpack 打包的过程和资源路径的处理有一定的了解。
webpack 打包的过程
在 webpack 打包的过程中，webpack 会将所有的资源进行打包，包括 js、css、图片、字体等。在打包的过程中，webpack 会对每个资源进行一个处理，将其转换成一个可以被浏览器识别的文件，并且生成一个新的文件名。同时，webpack 也会根据配置中的路径规则，将每个资源的路径进行修改，以便正确引用。
资源路径的处理
在 webpack 中，资源路径的处理是通过配置文件中的 output.publicPath 属性来实现的。这个属性指定了资源的访问路径，可以是相对路径或者绝对路径。当指定为相对路径时，webpack 会根据当前页面的路径来计算资源的访问路径。当指定为绝对路径时，webpack 会将资源的访问路径设置为指定的路径。
例如，我们有一个项目结构如下：
-- -------------------- ---- -------
- ---
- ----------
- ------
- ---
- --------
- ---
- ---------
- --------
- ----我们希望在 index.html 中引用 assets 目录下的资源。我们可以在 webpack 的配置文件中设置 output.publicPath 属性为 /dist/，这样 webpack 在打包时会将资源的路径修改为 /dist/assets/img/logo.png 和 /dist/assets/css/style.css。
解决路径不对的问题
当资源路径不正确时，我们需要在 webpack 的配置文件中进行调整。以下是一些常见的解决方法：
1. 使用绝对路径
如果我们的项目部署在一个固定的路径下，我们可以在 webpack 的配置文件中设置 output.publicPath 属性为绝对路径。这样就可以避免路径计算错误的问题。
module.exports = {
output: {
publicPath: 'https://example.com/assets/'
}
};2. 使用相对路径
如果我们的项目不确定部署在哪个路径下，我们可以使用相对路径来解决路径问题。在 webpack 的配置文件中，我们可以使用 path.join 方法来计算相对路径。
const path = require('path');
module.exports = {
output: {
publicPath: path.join(__dirname, 'dist/')
}
};3. 使用 html-webpack-plugin 插件
html-webpack-plugin 是一个非常实用的插件，可以自动生成 html 文件，并且将打包后的资源自动引入到 html 文件中。在使用该插件时，我们可以设置 publicPath 属性来解决路径问题。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
--------- -----------------
----------- --------
--
-
--示例代码
以下是一个简单的 webpack 配置文件，用于演示解决路径问题的方法。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
----------- --------
--
------- -
------ -
-
----- ---------
---- ---------------- -------------
--
-
----- -----------------------
---- ---------------
-
-
--
-------- -
--- -------------------
--------- -----------------
----------- --------
--
-
--结论
在使用 webpack 进行项目打包时，出现 html 中引用的图片、css 路径不对的问题是一个常见的问题。解决这个问题需要对 webpack 打包的过程和资源路径的处理有一定的了解。在实际开发中，我们可以根据具体情况选择合适的解决方法，来解决路径问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67579e10890bd9faa43663d6