webpack打包图片的时候,发现图片的src的值是[object Moudle]的值

16 篇文章 0 订阅
3 篇文章 0 订阅

在打包xxx.html中的img的时候,需要通过html-loader进行处理,如果不用则xxx.html中的img不会被打包,这个loader的作用就是,负责引入img,从而能被url-loader进行处理


问题:html-loader引入图片是以commonjs解析(node的),而url-loader默认是以es6模块化解析,所以导致出错


解决:

需要在进行图片处理的loader中进行处理

rules:[
{
test:/\.(png|jpg|gih)$/,
loader:'url-loader',
options:{
	limit:8*1024,//图片小于8kb,就会被以base64格式处理
	esModule:false,//关闭url-loader的es6解析模式,使用commonjs去解析
	name:'[hash:10].[ext]',//取hash值前10位,ext:取源文件的扩展名
}
},
{
text:/\.html$/,

loader:'html-loader'//处理html文件的img图片(负责引入img,从而能够被url-loader进行处理)
}
]
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值