webpack4.0使用MiniCSSExtractPlugin处理css文件中的url路径问题。

今天在做项目的时候，遇到一个挺简单但是很隐晦的问题。

描述如下： 

1 webpack中对css文件的处理使用的是： MiniCSSExtractPlugin、css-loader、post-loader。

对应的，在plugins中也相对应的设置一个MiniCssExtractPlugin.

问题来了，这样设置之后，当我们在css文件中使用url引入资源的时候，它打包出来的资源路径是有问题的。如下：

这是因为我们在使用MiniCSSExtractPlugin的时候，把打包好的文件放到一个新的文件夹中。如图二的82行，新建了一个css文件夹，所以才会多了一级目录。

解决办法也很简单，查阅官网，配置MiniCSSExtractPlugin.loader的publicPath即可。

这样设置之后，生成的文件中，如果有url引用的话，会在url之前自动添加 ../ 指向上级目录。

再次打包可以发现已经指向正确目录