vue腳手架升級Webpack4的css背景圖片靜態路徑打包

梧桐樹下的左右發表於2019-03-22
VueWebCSS

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的頁面，需要打包成靜態的檔案路徑，開啟頁面可以直接檢視靜態頁面

vue腳手架升級Webpack4的css背景圖片靜態路徑打包

類似於這樣的，雖然對於Http請求外部資源不支援，但是可以保證靜態頁面顯示完成，之前是這樣的背景圖片路徑有誤，這是靜態打包的 dist/static/css/static/img/bg.a3be7a1.png

vue腳手架升級Webpack4的css背景圖片靜態路徑打包

經過網上查詢很多都沒有確定的解決方法，也看過官網，它是這樣配置的，直接在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

vue腳手架升級Webpack4的css背景圖片靜態路徑打包

試驗2 圖3-2

vue腳手架升級Webpack4的css背景圖片靜態路徑打包

發現是返回引數的問題，成功打包靜態背景圖片的返回配置中試驗中抽離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中的靜態背景圖片路徑問題。


相關文章