解决 Webpack 打包 HTML 模板中图片路径不正确的问题

问题背景

在前端开发中，我们常常需要使用 HTML 模板来渲染数据。而在使用 Webpack 打包的过程中，我们很容易遇到一个问题：HTML 模板中的图片路径不正确。这是因为 Webpack 在打包时会将相关文件打包到指定的路径下，而 HTML 中的图片路径并未被修改，所以会导致路径不正确，图片加载失败。

解决方案

要解决这个问题，我们可以使用 html-webpack-plugin 插件来打包 HTML 模板。该插件可以自动将打包后的路径注入到 HTML 中，从而解决路径不正确的问题。

安装插件

首先，我们需要安装该插件：

npm install html-webpack-plugin --save-dev

配置插件

在 Webpack 配置文件中，我们需要引入该插件并进行配置。具体来说，我们需要指定模板文件路径、打包后的文件名以及打包后文件的输出路径。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ... 省略其他配置 ...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html', // 指定模板文件路径
      filename: 'index.html', // 打包后的文件名
      path: path.resolve(__dirname, 'dist'), // 打包后文件的输出路径
    }),
  ],
};

在模板中使用路径

在我们的 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