为什么webpack无法处理HTML img标签src引入的图片，该如何修复？

问题成因 #

• webpack默认仅会处理JS、CSS文件中引入的资源，你直接在HTML模板的img标签src写的相对路径，没有对应的loader解析的话，会被当做静态字符串直接保留到打包后的HTML文件中，和最终dist目录的资源路径不匹配，自然加载失败。你通过CSS引入能成功，是因为css-loader会自动解析css里的url()路径，交给file-loader处理后替换成正确的打包后路径。
• 你当前的配置还存在两个额外错误：
  • 生产环境的module.rules里完全没有配置图片处理规则，生产打包时图片资源会完全不被处理
  • 生产环境的mode值写错了，正确值是production不是product，会导致webpack不会启用生产环境默认优化配置

修复方案 #

1. 安装并配置html-loader #

首先安装依赖：
npm install html-loader --save-dev

然后修改webpack.config.js中两个环境的module.rules，添加html-loader的规则，同时把图片处理规则同步到生产环境的规则配置中：

module: {
  rules: [
    // 新增html-loader规则，用于解析html中的资源路径
    {
      test: /\.html$/i,
      loader: "html-loader",
    },
    // 原有css规则保留
    {
      test:/\.css$/,
      use:[
        'style-loader',
        'css-loader'
      ]
    },
    // 图片处理规则，生产环境也要加这段
    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            // 可选配置：统一指定图片打包后的输出路径和文件名规则，避免目录混乱
            name: 'img/[name].[hash:8].[ext]'
          }
        },
      ],
    }
  ]
}

2. 修正生产环境的mode配置 #

把生产环境配置中的mode: 'product'修改为mode: 'production'

3. 可选优化：替换file-loader为webpack5原生资源模块 #

如果你使用的是webpack5及以上版本，不需要额外安装file-loader，可以直接用内置的资源模块处理图片，配置更简洁：

{
  test: /\.(png|jpe?g|gif)$/i,
  type: 'asset/resource',
  generator: {
    filename: 'img/[name].[hash:8][ext]'
  }
}

配置完成后重启devServer，HTML里的img标签直接写相对路径就能正常被处理加载了。

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