Webpack 5无法从HTML模板正确加载图片问题求助

问题根源在于url-loader默认以ES模块格式导出资源，而html-loader处理HTML模板中<img>的src属性时，误将这个ES模块的引用当作了资源路径，最终生成了包含导出语句的无效文件，而非正确的图片路径。

具体修复步骤 #

修改webpack.common.js中的图片加载规则 #

在url-loader的配置选项中添加esModule: false，强制其以CommonJS格式导出资源路径，确保html-loader能正确解析：

{
  test : /\.(png|jp(e*)g|svg)$/,
  use : [{
    loader : 'url-loader',
    options : {
      limit : 800,
      name : 'images/[hash]-[name].[ext]',
      esModule: false // 添加该配置项
    }
  }]
}

验证修复效果 #

重新执行打包后，HTML模板中的<img>标签src会被正确替换为：

<img class="error" src="images/a062cdc3b40c269bca1f81936119073c-error.svg" id="error">

• 当图片体积小于800字节时，url-loader会直接将图片转为Base64编码嵌入HTML，无需生成单独文件；
• 当图片体积超过800字节时，会按照配置生成带哈希值的图片文件，并在HTML中写入正确的相对路径。

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