在前端开发中，Webpack 是一个很常用的构建工具。通过 Webpack，我们可以将多个 JS、CSS 等静态资源打包成一个或多个文件，以及处理图片、字体等资源。但是，在使用 Webpack 打包之后，有时候我们会遇到静态资源的路径不正确的问题，这会导致我们的页面无法正确地加载静态资源。
本文将介绍如何解决 Webpack 打包后静态资源路径不正确的问题，并提供示例代码供参考。
问题分析
当 Webpack 将静态资源打包后，如果路径不正确，一般有以下几种常见情况：
- 打包的资源路径为相对路径，但是页面的访问路径与静态资源的路径不一致；
- 静态资源的路径为绝对路径，而不是相对路径；
- 静态资源的路径被 Webpack 处理了，如添加了 hash 值或版本号，但是在页面中没有正确引用。
解决方法
方法一：使用 publicPath
Webpack 提供了一个配置项 publicPath，用来指定打包后生成的文件的公共路径。在打包静态资源时，只需将 publicPath 和文件名拼接起来，就能得到正确的资源路径。
module.exports = {
//...
output: {
publicPath: '/'
}
}例如，静态资源的路径为 /assets/images/logo.png，publicPath 为 /，则在页面引用静态资源时的路径为 /assets/images/logo.png。
方法二：使用相对路径
在 Webpack 配置中，启用相对路径可以指定所有静态资源的相对路径。
module.exports = {
//...
output: {
publicPath: './'
}
}当相对路径被设置为 ./ 时，所有的静态资源都会相对于 HTML 文件的路径进行加载。例如，静态资源的路径为 /assets/images/logo.png，HTML 文件的路径为 /pages/index.html，则在页面引用静态资源时的路径为 ../../assets/images/logo.png。
方法三：使用插件
有一些 Webpack 插件可以帮助我们轻松地解决静态资源路径不正确的问题。
1. html-webpack-plugin
html-webpack-plugin 可以自动生成 HTML 文件并自动引入打包后的静态资源，而不需要手动写 HTML 文件或添加静态资源的引用路径。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-----
-------- -
--- -------------------
--------- ----------------
--
-
-在引用静态资源时，只需要在 HTML 文件中使用相对路径即可。
<img src="./assets/images/logo.png">
2. copy-webpack-plugin
copy-webpack-plugin 可以将静态资源复制到打包后的目录中，而不是将其打包进 JS 文件，这样可以使静态资源的路径与原有路径一致。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-----
-------- -
--- -------------------
-
----- -------------
--- --------
-
--
-
-使用 copy-webpack-plugin 时，在引用静态资源时，只需要在 HTML 文件中使用绝对路径即可。
<img src="/assets/images/logo.png">
结论
在使用 Webpack 打包静态资源时，处理好资源路径非常重要。我们可以通过设置 publicPath 或相对路径的方式来解决静态资源路径不正确的问题。如果你使用插件，可以更方便地解决问题。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67386c04317fbffedf105d4b