2020-04-23再记一笔

webpack单独打包css文件, 使css中的url路径错误

一开始打包的dist文件的如下:

想把dist中的css文件,单独打包放到dist文件夹下的css文件夹,于是开始动手:

之前使用的mini-css-extract-plugin把css拆分出来用外链的形式引入: 

这是修改前的效果, 图片显示正常:

修改部分: 

修改后的目录: 

dist目录中多了一个css文件夹, 达到预期, 可是图片显示不正常了:

在新页面中打开背景图, url地址栏显示.......dist/css/img/dog.37d12e64.jpg,  而真正的图片应该在dist/img/dog.37d12e64.jpg, 路径不对, 所以显示不了

解决方法: 在rules中关于.css文件的设置选项中设置publicPath为'../'

设置之后, 狗子回来了: 

参考https://blog.csdn.net/logan_LG/article/details/82107390