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中的静态背景图片路径问题。