在使用 Webpack 打包前端项目时，我们通常会将 HTML 文件作为入口文件之一，然后在 HTML 文件中引用打包后的 JavaScript、CSS 等资源文件。然而，在打包过程中，我们可能会遇到一个问题：打包后的 HTML 文件中引用的资源的路径不正确，导致页面无法正确显示。
这种问题通常是由于 Webpack 的输出路径和我们 HTML 文件中引用资源的路径不一致造成的。因此，我们需要在 Webpack 配置中进行一些调整，以解决这个问题。
解决方案
- 使用 HtmlWebpackPlugin 插件
HtmlWebpackPlugin 是一个用于生成 HTML 文件的插件，它会根据 Webpack 输出的文件自动生成 HTML 文件，并将生成的 HTML 文件插入到 Webpack 输出目录中。这样我们就可以直接在浏览器中打开该 HTML 文件来查看页面效果。
使用 HtmlWebpackPlugin 插件的主要好处在于它可以自动处理资源路径问题，即使我们在 HTML 文件中使用相对路径引用资源，它也能正确的将路径转化为 Webpack 打包后的路径。
下面是一个简单的 Webpack 配置示例，演示如何使用 HtmlWebpackPlugin 插件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- -------------------
--------- -------------------
---
--
--在上面的配置中，我们指定了 HtmlWebpackPlugin 插件的模板文件为 src/index.html，Webpack 会根据该文件自动生成 index.html 并放到 dist 目录下。
在 index.html 文件中，你可以正常使用相对路径引用 JS 或者 CSS 资源，HtmlWebpackPlugin 会自动为你生成正确的路径。
- 使用 publicPath 参数
如果你不想使用 HtmlWebpackPlugin 插件，也可以在 Webpack 中直接指定 publicPath 参数来解决资源路径问题。
publicPath 是一个配置项，用于告诉 Webpack 打包后各个资源的访问路径。默认情况下它的值是空字符串，当你的资源是相对于 HTML 文件的相对路径时，它会自动补全为 ./，从而导致资源访问路径错误。
为了解决这个问题，我们需要在 Webpack 配置中指定 publicPath 参数，并将其设置为正确的相对路径。例如：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
----------- -----
--
--在上面的配置中，我们将 publicPath 参数设置为 ./，对应着我们打包后的资源相对于 HTML 文件的路径。
总结
无论你使用哪种方式来解决 Webpack 打包后 HTML 文件引用资源路径错误的问题，正确的理解资源路径和 Webpack 的输出路径的关系是很重要的。只有掌握了这个，才能更好地管理你的前端项目，并顺利地完成打包和部署的工作。
参考代码：
Webpack 配置文件示例
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- -------------------
--------- -------------------
---
--
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e81f795b1f8cacd62d6e3