webpack如何设置html中img路径和css中背景图片路径区别开

在使用webpack过程中，打包后发现html中img路径是：

<img src="img/01.jpg" alt="标题图片" /> 

但是在main.css文件中的background-image

.test{
  width: 200px;
  height: 200px;
  background: url("img/01.jpg") center center no-repeat;
}

但是，实际目录确实这样排列的

dist
   img
      01.jpg
   style
      main.css
   index.html

所以看来，webpack打包出来的图片路径是一致，这样就导致css样式中的背景图片访问不出来了。

webpack.config.js

{
	test: /\.(jpe?g|png|gif)$/i, //图片文件
	use: [
	  {
		loader: 'url-loader',
		//include: [path.resolve(__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']
	}

例图：

以此结束！！！