如何在dist目录HTML中引用copy-webpack-plugin生成的带哈希图片？

问题根源 #

你用copy-webpack-plugin复制图片时，插件只会给文件添加哈希，但不会自动更新index.ejs里<img>标签的src属性，导致生成的index.html引用的还是无哈希的旧路径，自然找不到图片。

解决方案：让Webpack接管图片资源处理 & 自动替换引用 #

放弃用copy-webpack-plugin手动复制图片，改用Webpack 5的Asset Modules配合html-webpack-plugin来处理，这样Webpack会自动给图片加哈希，同时更新EJS里的图片引用。

步骤1：安装必要依赖 #

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

步骤2：修改webpack.production.config.js配置 #

1. 移除copy-webpack-plugin中关于图片复制的配置项
2. 添加资源模块规则处理图片
3. 配置html-webpack-plugin解析EJS模板

示例配置：

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

module.exports = {
  entry: './src/index.js', // 按需修改你的项目入口文件
  output: {
    filename: 'js/[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // 每次构建自动清空dist目录
  },
  module: {
    rules: [
      // 处理EJS模板，解析其中的资源引用
      {
        test: /\.ejs$/,
        use: [
          'html-loader', // 解析HTML中的资源路径
          'ejs-loader'   // 编译EJS动态语法
        ]
      },
      // 处理图片资源，自动生成带哈希的文件名
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name].[contenthash][ext]' // 图片输出的路径与命名规则
        }
      },
      // 保留你的其他loader配置（如CSS、JS编译等）
    ]
  },
  plugins: [
    // 基于EJS模板生成最终HTML，自动替换图片引用路径
    new HtmlWebpackPlugin({
      template: './index.ejs', // 你的EJS模板文件路径
      filename: 'index.html',  // 生成的HTML文件名
      minify: {                // 生产模式下压缩HTML
        collapseWhitespace: true,
        removeComments: true
      }
    })
    // 移除原有的copy-webpack-plugin图片复制相关配置
  ]
};

步骤3：修改index.ejs中的图片路径 #

确保<img>标签的src使用项目源码内的相对路径，比如：

<!-- 假设图片存放在src/images目录下 -->
<img src="./src/images/avatar.png" alt="用户头像" />

Webpack会自动解析这个路径，把图片打包到dist/images/目录并添加哈希，同时html-webpack-plugin会把生成的HTML里的src替换成带哈希的最终路径（比如images/avatar.abc123.png）。

额外说明 #

• 如果你的项目不需要EJS动态语法，也可以直接用index.html作为模板，只需把html-loader的匹配规则改为.html即可。
• asset/resource是Webpack 5的原生特性，替代了旧版的file-loader，配置更简洁高效。

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