webpack项目HTML中img标签图片加载失败，CSS图片加载正常如何解决？

问题原因 #

• 你当前使用的file-loader与html-loader存在模块规范不兼容问题：html-loader默认以ES模块规范解析html中的图片路径，而file-loader默认输出CommonJS格式的模块引用，最终打包后图片路径会变成[object Module]，无法正确指向资源
• 你存放在src/assets下的图片没有被配置输出到打包后dist的对应路径，直接写相对路径会找不到资源
• 如果你使用的是webpack5版本，file-loader已经被官方废弃，原生的Asset Modules能力可以替代file-loader/url-loader/raw-loader，无需额外安装loader，配置更简单

修复方案 #

方案1：兼容现有file-loader配置 #

修改webpack.config.js中的图片和html规则：

// 修改HTML规则，关闭ES模块
{
  test: /\.(html)$/,
  use: [{
    loader: 'html-loader',
    options: {
      esModule: false
    }
  }]
},
// 修改图片规则，关闭ES模块，指定输出路径
{
  test: /\.(jpe?g|png|gif)$/i,
  loader: "file-loader",
  options: {
    esModule: false,
    outputPath: 'assets/images/',
    name: '[name].[hash:8].[ext]'
  }
}

修改后html中可以直接写相对路径<img src="./assets/xxx.png">，或者用<%= require('./assets/xxx.png') %>的写法都可以正常生效。

方案2：webpack5使用原生Asset Modules（更推荐） #

完全移除file-loader依赖，修改webpack.config.js的图片规则：

// 删除原来的file-loader图片规则，替换为如下配置
{
  test: /\.(jpe?g|png|gif)$/i,
  type: 'asset/resource',
  generator: {
    filename: 'assets/images/[name].[hash:8][ext]'
  }
}
// html规则可以保持默认不用改
{
  test: /\.(html)$/,
  use: ['html-loader']
}

修改完直接重新打包即可，html中直接写相对路径的图片会被自动解析打包到对应路径。

额外注意事项 #

• 如果你的图片是存放在static目录下的，不需要经过webpack打包处理，引用的时候直接写/xxx.png即可，CopyWebpackPlugin会把static目录下的所有资源直接复制到dist根目录
• 你现在index.html里硬编码的script1.js、style.css等静态资源如果是存放在src下的，不要直接写路径，要么放到static目录下引用，要么通过js import引入，否则打包后不会被处理

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