我用的是webpack的V5.66.0版本,下面是正确的配置方法
//配置图片的loader
{
test: /\.(gif|png|jpe?g)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
esModule: false
}
},
type: 'javascript/auto',
}
下面是我的debug过程
原始的配置webpack.config.js配置
//配置图片的loader
{
test: /\.(gif|png|jpe?g)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
}
},
}
可以正常编译
但是会多生成一个打不开的图片文件(本应该只生成一个1.jpg文件)
但是网页不能正常显示,可以看到加载的是打不开的图片(d4586487e52584ae24dc.jpg)
然后通过查询官方文档找到问题描述
按照官方的文档并没有解决我的问题,发现了file-loaderv的4.3.0版本默认使用了esModule语法,造成了引用图片文件时的方式和以前的版本不一样。
因此,再关闭esModule属性就可以了,配置文件如下
//配置图片的loader
{
test: /\.(gif|png|jpe?g)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
esModule: false
}
},
type: 'javascript/auto',
}