vue脚手架升级Webpack4的css背景图片静态路径打包

webpack4升级之后对于css的打包需要用到mini-css-extract-plugin替换掉之前webpack3版本的extract-text-webpack-plugin插件。之前css静态打包对于背景图片需要的是在build文件夹内的utils.js文件中更改为

if (options.extract) {  
return ExtractTextPlugin.extract({    
use: loaders,    
fallback: 'vue-style-loader',    
publicPath: '../../'  // 这行是需要添加的
})} 
else {  
return ['vue-style-loader'].concat(loaders)
}复制代码

但是在webpack4升级之后变成这个了，（大多数webpack3升级webpack4的教程是这样升级的）所以之前的背景图静态打包配置就不知道添加到哪里了

// webpack4升级代码  
return [    
options.extract ? MiniCssExtractPlugin.loader : 'vue-style-loader',].concat(loaders)
].concat(loaders)复制代码

通过实验，因为做H5的页面，需要打包成静态的文件路径，打开页面可以直接查看静态页面

类似于这样的，虽然对于Http请求外部资源不支持，但是可以保证静态页面显示完成，之前是这样的背景图片路径有误，这是静态打包的 dist/static/css/static/img/bg.a3be7a1.png

经过网上查找很多都没有确定的解决方法，也看过官网，它是这样配置的，直接在rule中使用publicPath: '../'。

rules: [
    {  
        test: /\.css$/,
        use: [
            {
                loader: MiniCssExtractPlugin.loader, 
                options: {
                    // you can specify a publicPath here             
                    // by default it use publicPath in webpackOptions.output             
                    publicPath: '../'
                }
            },
            "css-loader"        
        ]
    }
]复制代码

不过在VUE-CLI中又不想一个个的这样配置所有的样式loader所以有了以下的试验，

试验1 图3-1

试验2 图3-2

发现是返回参数的问题，成功打包静态背景图片的返回配置中试验中抽离css的插件是存放在一个对象中的，试验2是webpack3的项目，用来对比研究，是extract-text-webpack-plugin这个插件，然而使用这个代码之后会返回值对象的抽离插件缺少options: { omit: 1, remove: true, publicPath: '../../' }这个，所以之后的打包图片路径不正确。

return [   options.extract ? MiniCssExtractPlugin.loader : 'vue-style-loader',].concat(loaders)复制代码

找到问题的关键，所以在返回值里面手动添加publicPath: '../../'使用下边代码片段

return [  
options.extract ? {    
loader: MiniCssExtractPlugin.loader,    
options: {      
publicPath: '../../'    
}  } : 'vue-style-loader',
].concat(loaders)复制代码

得到返回值于webpack3的一致，完美解决css中的静态背景图片路径问题。