webpack如何设置html中img路径和css中背景图⽚路径区别开
在使⽤webpack过程中，打包后发现html中img路径是：
<img src="img/01.jpg" alt="标题图⽚" />
但是在main.css⽂件中的background-image
.test{
width: 200px;
height: 200px;
html如何设置图片滚动background:url("img/01.jpg") center center no-repeat;
}
但是，实际⽬录确实这样排列的
dist
img
01.jpg
style
main.css
index.html
所以看来，webpack打包出来的图⽚路径是⼀致，这样就导致css样式中的背景图⽚访问不出来了。
{
test:/\.(jpe?g|png|gif)$/i,//图⽚⽂件
use:[
{
loader:'url-loader',
//include: [solve(__dirname, "../src/static")],
options:{
esModule:false,
limit:10240,
name:'img/[name].[hash:8].[ext]',
//outputPath: 'img/', //导出之后的路径
//publicPath: '../'  //公共的路径
}
}
]
},
上⾯代码控制的是html中的img路径和css中的背景图⽚路径，如果想要区分开这两种路径。
需要在打包导出css的loader配置中配置好背景图⽚的路径，
这⾥，我⽤到的将less,sass,css⽂件打包成css⽂件的插件是：
mini-css-extract-plugin
既然是在这个插件中转换才将css集中在⼀起，然后再导出到⼀个main.css⽂件中，所以，背景图⽚的路径也需要在这个插件中的options 选项中配置。
代码：
{
test:/\.less$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
//在这⾥设置publicPath的路径就是background-img的路径  options:{
publicPath:'../'
}
},
'css-loader','less-loader']
}
例图：
以此结束