在使用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;}
但是，实际目录确实这样排列的
distimg01.jpgstylemain.cssindex.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']}
例图：
以此结束！！！
