前言
在前端开发中，我们经常使用 Webpack 进行代码打包，但有时会遇到 Webpack 打包后 HTML 页面引用路径错误的问题，这对页面的显示会有很大的影响。本文将详细介绍如何解决这一问题，包含深度和学习以及指导意义，并提供示例代码供读者参考。
问题描述
通常来说，我们在 HTML 页面中引入 CSS、JavaScript 等资源时，会使用相对路径，如下所示：
<link rel="stylesheet" href="./css/style.css"> <script src="./js/main.js"></script>
但是在 Webpack 打包后，由于 Webpack 会将源代码中的资源打包成一个或多个固定的文件，相对路径就会失效，我们需要改成绝对路径。例如，如果我们使用了 HtmlWebpackPlugin 插件生成 HTML 文件，并将 HTML 文件打包到 dist 目录下，那么我们应该使用如下的路径：
<link rel="stylesheet" href="/css/style.css"> <script src="/js/main.js"></script>
但是，手动更改这些路径非常困难，特别是项目中存在大量 HTML 页面时，更是难以管理和维护。
解决方法
针对这个问题，可以有多种解决方法，这里介绍其中两种常用的方法。
方法一：使用 HtmlWebpackPlugin 插件
HtmlWebpackPlugin 是一个用于生成 HTML 文件的 Webpack 插件，可以轻松地生成包含正确资源链接的 HTML 文件。我们只需要在 Webpack 配置文件中引入 HtmlWebpackPlugin 插件，并配置好路径即可。
例如，我们将 HTML 文件打包到 dist 目录下，可以这样配置：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------------- - -
-- ---
-------- -
-- ---- ---- --
--- -------------------
--------- ------------- -- -------
--------- ------------------- -- ------
------- ----- -- --------- ---- --
---
--
--在 HTML 文件中，我们仍然可以使用相对路径来引入资源，HtmlWebpackPlugin 插件会自动将这些路径转换成绝对路径。
<link rel="stylesheet" href="./css/style.css"> <script src="./js/main.js"></script>
在打包后，HtmlWebpackPlugin 会自动将这些路径转换为绝对路径：
<link rel="stylesheet" href="/css/style.css"> <script src="/js/main.js"></script>
方法二：使用 publicPath 配置
如果我们选择不使用 HtmlWebpackPlugin 插件，或者使用其他工具生成 HTML 文件，则可以使用 Webpack 的 publicPath 配置来解决问题。
publicPath 配置项表示网站根目录的绝对路径，可以在 Webpack 配置文件中设置。例如，如果我们将 publicPath 设置为 /，那么所有资源的链接都会使用绝对路径 / 开头，从而解决路径错误的问题。
-- -------------------- ---- -------
----- ------------- - -
-- ---
------- -
-- ----------
----- -------------------- --------
-- ---------
--------- ---------------------------
-- ------ ----- ---
-------------- ---------------------------
-- ----
----------- ----
--
--在 HTML 文件中，我们仍然可以使用相对路径来引入资源，Webpack 会自动将这些路径转换成绝对路径。
<link rel="stylesheet" href="./css/style.css"> <script src="./js/main.js"></script>
在打包后，Webpack 会自动将这些路径转换为绝对路径：
<link rel="stylesheet" href="/css/style.css"> <script src="/js/main.js"></script>
总结
无论使用哪种方法，都能够解决 Webpack 打包后 HTML 页面引用路径错误的问题。在实际项目中，我们可以根据具体情况选择最适合自己的方法。通过这次深入学习，我们可以更加深入理解 Webpack 的工作原理，同时也能提高前端开发的效率和质量。
示例代码：https://github.com/JDhello/webpack-demo/tree/master/demo5-htmlpath
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494065648841e9894191e3a