在打包
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进行处理)
}
]