module.exports = {
entry:'.src/index.js',
output:{
filename:'main.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.webp$/,
use:[{
loader:'file-loader',
options:{
name:'image/[name].[hash:4].[ext]'
}
}]
}
]
}
}
还没有打包前
打包后:
在图片文件加外多生成了一个图片文件,这不符合我们的预期,
module.exports = {
entry:'.src/index.js',
output:{
filename:'main.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.(jpe?g|png|gif|webp)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false,//file-loader默认使用es6模块解析,如果使用es6的模块解析,html中图片的路径会不对,关闭es6模块解析开启commonjs模块解析
name: 'images/[name].[hash:6].[ext]',
}
}
],
type: 'javascript/auto'//这个属性如果没有设置,则会生成两张图片(如果你的页面只引入了一张图片)
}
]
}
}
只要在options里添加一个属性esModule:false和在rules对象中添加type:'javascript/auto'就不会出现这种情况了,这两个属性的作用在代码的注释中有写到。
在进行一次打包后,就不会有问题了