如何解决 HtmlWebpackPlugin 导致打包后 html 中 css 路径不正确的情况？
在前端开发中，我们经常会使用 webpack 来打包项目。webpack 提供了很多插件来优化我们的打包流程，其中 HtmlWebpackPlugin 就是常用的一个插件，它可以将我们的打包结果输出为一个 html 文件，并自动添加引用我们打包后的 js 文件。
然而，在使用 HtmlWebpackPlugin 的过程中，我们有可能会遇到一个问题——打包完后生成的 html 文件中引用的 CSS 文件路径不正确。这是因为 HtmlWebpackPlugin 默认使用了相对路径，但如果我们的 css 文件不是和 html 文件在同一个目录下，那么就会导致路径不正确。
那么，如何解决这个问题呢？下面就来分享一下解决方案。
解决方案
在 HtmlWebpackPlugin 中，其实有一个非常实用的选项——publicPath，它可以帮助我们设置打包后 html 中引用资源的根路径。我们可以将其设置为一个绝对路径，这样就可以确保路径的正确性。
具体的操作步骤如下：
- 在 webpack 的配置文件中加入
publicPath选项，例如：
module.exports = {
// ...
output: {
// ...
publicPath: '/',
},
// ...
}这里我们将 publicPath 设置为根路径 /，也可以根据实际情况设置为其他路径。
- 在 HtmlWebpackPlugin 配置中加入
publicPath选项，例如：
plugins: [
new HtmlWebpackPlugin({
// ...
publicPath: '/',
}),
// ...
]这里的 publicPath 选项和上一步中的作用是一样的，都是为了设置根路径。
通过以上两个步骤，我们就可以解决 HtmlWebpackPlugin 导致打包后 html 中 css 路径不正确的情况了。
示例代码
下面是一个完整的示例代码：
webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ---------------------
----- ----------------------- --------
----------- ----
--
-------- -
--- -------------------
--------- -------------------
------ --- -----
----------- ----
---
--
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--index.html
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------- ------------------------------- ----------
----- ---------------- --------------------------- --
-------
------
---- ----------------
------- ---------------------------------
-------
-------注意，这里的 CSS 和 JS 文件都是放在 dist/static 目录中的。
总结
通过以上的步骤，我们就可以解决 HtmlWebpackPlugin 导致打包后 html 中 css 路径不正确的情况了。同时，我们也了解了如何使用 publicPath 选项来设置打包后 html 中引用资源的根路径，这对我们在前端开发中处理路径问题非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659f85cfadd4f0e0ff81b4b6