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中的靜態背景圖片路徑問題。