问题背景
在前端开发中，我们常常需要使用 HTML 模板来渲染数据。而在使用 Webpack 打包的过程中，我们很容易遇到一个问题：HTML 模板中的图片路径不正确。这是因为 Webpack 在打包时会将相关文件打包到指定的路径下，而 HTML 中的图片路径并未被修改，所以会导致路径不正确，图片加载失败。
解决方案
要解决这个问题，我们可以使用 html-webpack-plugin 插件来打包 HTML 模板。该插件可以自动将打包后的路径注入到 HTML 中，从而解决路径不正确的问题。
安装插件
首先，我们需要安装该插件：
npm install html-webpack-plugin --save-dev
配置插件
在 Webpack 配置文件中，我们需要引入该插件并进行配置。具体来说，我们需要指定模板文件路径、打包后的文件名以及打包后文件的输出路径。
-- -------------------- ---- ------- ----- ----------------- - ------------------------------- -------------- - - -- --- ------ --- -------- - --- ------------------- --------- ----------------- -- -------- --------- ------------- -- ------- ----- ----------------------- -------- -- ---------- --- -- --展开代码
在模板中使用路径
在我们的 HTML 模板中，我们需要使用合适的相对路径来引用图片。具体来说，我们需要使用 Webpack 的内置变量 __webpack_public_path__ 来指定打包后图片的路径。
比如，我们要在模板中引用 src/assets/images/logo.png 这张图片，我们可以这样写：
<img src="<%= __webpack_public_path__ %>/assets/images/logo.png" alt="logo">
这样，打包后的 HTML 中的图片路径就会被自动替换为正确的相对路径了。
总结
通过使用 html-webpack-plugin 插件以及合适的相对路径，我们可以轻松地解决 Webpack 打包 HTML 模板中图片路径不正确的问题。这不仅可以避免页面加载失败的问题，还可以提高前端开发的效率和代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658ff443eb4cecbf2d580a90
