打包图片文件时路径错误输出为[object-module]

本文链接：https://blog.youkuaiyun.com/sinat_22480443/article/details/115377235

当使用webpack打包时，如果内部代码遵循CommonJS或AMD规范，而非ES Modules，可能会遇到图片路径错误输出为[object Module]。错误因file-loader@6.0.0的新配置项esModule导致，该配置项默认值为true，影响require或img标签引用图片。解决办法是在file-loader或url-loader中将esModule选项设为false。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误场景

在使用webpack打包，内部代码并非 ES Modules 规范，而是 CommonJS 或是 AMD 规范。运行时报错。
在 main.js 中添加图片

// // 2. 支持 CommonJS 的 require 声明
const createHeading = require('./heading.js').default
const better = require('./better.png')
require('./main.css')

const heading = createHeading()
const img = new Image()
img.src = better
document.body.append(heading)
document.body.append(img)

使用 url-loader / file-loader

 {
    test:/.png$/,
    use: {
       loader: 'url-loader' ,
       // 超过 10KB 文件通过 file-loader 单独提取存放；小于 10KB 文件转换为 Data URLs 嵌入代码中。
       options: {
          limit: 10 * 1024  // 10KB
        }
     }
  }

错误原因

经过在网上一番查找，借鉴别人的答案。
因为file-loader@6.0.0版本中，为了优化性能新增了一个关键的配置项esModule 。这个配置项的作用，是指定引入文件的方式，是否指定es module的形式引入（也就是 improt name from ‘url’）这个配置项默认值是true，如果是true的情况下，那再使用require或者<imgsrc="./cover.jpg">引用方式就会出现上面的问题。

解决办法

将 esModule设置为 false。在 file-loader 或 url-loader 内设置

 {
    test:/.png$/,
    use: {
       loader: 'url-loader' ,
       options: {
	       esModule: false,
           limit: 10 * 1024  // 10KB
        }
     }
  }