使用 webpack 打包，图片地址变成了 [object Module]

尹宇星 Kim

于 2020-03-10 17:14:54 发布

阅读量1.6k

点赞数 1

分类专栏：日常开发的小问题

本文链接：https://blog.youkuaiyun.com/weixin_44273383/article/details/104778132

版权

日常开发的小问题专栏收录该内容

22 篇文章

订阅专栏

在webpack 5.0.0更新后，图片路径出现[object Module]问题，原因是默认启用esModule。解决办法是明确设置esModule选项为false，通过配置示例可了解如何修改。

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

这个问题是 file-loader 在 5.0.0 的更新中造成的：

BREAKING CHANGES

minimum required nodejs version is 10.13.0
rename the esModules option to esModule
switch to ES modules by default (the option esModule is true by default)

从更新日志看到，5.0.0 默认将 esModule 设置为了 true。所以我们只要显示的将它再改为 false 就好了，下面是一段配置示例：

{
	test: /\.(png|jpe?g)(\?.*)?$/,
	loader: 'url-loader',
	options: {
		esModule: false,
		limit: 10000
	}
}

url-loader 是对 file-loader 的封装，目的是可以使用 limit 来判断是否把图片编译成 base64 格式，最后还是会调用 file-loader，所以设置 esModule 同样有效。