Webpack 5：如何在HTML中自动生成带contentHash的图片资源正确路径

我明白你现在的困扰：在JS里导入图片能自动拿到带哈希的资源路径，但直接在Handlebars模板里写img的src就不行——这是因为webpack只会处理模块导入的资源，模板里的静态src字符串它不会主动解析。下面给你几个靠谱的解决办法，都是我实际项目里用过的：

方法一：通过HTMLWebpackPlugin传递资源路径 #

这个方法是把图片作为模板参数传给HBS，让模板能直接用处理后的路径：

1. 先在你的入口JS文件（比如index.js）里导入图片，或者直接在webpack配置里引入：

// 方式A：在JS里导入后导出
import pageImg from "../assets/img.jpg";
export const assets = {
  pageImgUrl: pageImg
};

// 方式B：直接在webpack配置里引用
// 注意webpack 4及以下版本，require后可能需要加.default
const imgPath = require("./src/assets/img.jpg").default;

2. 修改webpack.config.js里的HTMLWebpackPlugin配置，添加templateParameters字段：

plugins: [
  new HTMLWebpackPlugin({
    template: "src/handlebars/index.hbs",
    filename: "index.html",
    // 把图片路径作为参数传给模板
    templateParameters: {
      imgUrl: imgPath // 对应方式B的变量，用方式A则填assets.pageImgUrl
    }
  }),
],

3. 最后在Handlebars模板里用这个参数：

<img src="{{imgUrl}}" alt="" />

这种方法的好处是能统一管理所有模板需要的资源，适合多页面或者资源较多的项目。

方法二：让Handlebars模板支持直接require资源 #

如果你想直接在模板里写资源路径，那就配置handlebars-loader允许解析require语句：

1. 修改webpack的module.rules里的handlebars-loader配置：

{
  test: /\.hbs$/,
  use: [
    {
      loader: "handlebars-loader",
      options: {
        allowRequire: true, // 关键：开启允许require
        precompileOptions: {
          strict: true
        }
      }
    }
  ]
}

2. 然后在HBS模板里直接用require引用图片：

<img src="{{require('../assets/img.jpg')}}" alt="" />

webpack会自动解析这个require，把它替换成打包后带contentHash的资源路径。这个方法更直接，适合小项目或者零散的资源引用。

额外提示：webpack 5的优化 #

如果你用的是webpack 5，其实可以不用file-loader了，webpack内置了资源模块，配置更简洁：

module: {
  rules: [
    {
      test: /\.(png|jpg)$/,
      type: 'asset/resource',
      generator: {
        filename: '[name].[contenthash][ext]' // 直接在这里定义带哈希的文件名
      }
    },
    // ...其他规则
  ]
}

这个配置和之前的file-loader效果一致，但不需要额外安装loader，更省心。

内容的提问来源于stack exchange，提问作者Rajat Aggarwal