webpack 對 css 壓縮中對字首的處理

在 vue-cli 建立的專案中，用預設的 webpack 配置對專案打包後，發現 css 檔案中樣式的字首有所缺失，例如：flex 這個應該有字首的屬性卻沒有（display:-webkit-flex; && -webkit-flex:1），導致樣式在 iphone 6s plus 上出現了相容問題。

postcss 對 css 的字首是有處理功能的，在專案的預設配置中，會根據各個瀏覽器最新兩個版本的支援情況去新增字首的，而現在瀏覽器都應該能很好地支援 flex 了，於是，便不再加字首。對此，我們可以做如下處理：

//
vue-loader.config.js
......
module.exports =)
]}

經過以上處理，打包後的 css 應該就擁有合適的字首了，但並不如此，原因是在打包過程中，css 有個壓縮動作，在這個動作中，壓縮外掛程式（用的是 optimize-css-assets-webpack-plugin 這個外掛程式）會再一次對 css 的字首做處理，會將它認為不需要的**（如不需要的 css 字首）去掉。因為前面已經用 postcss 對 css 的字首做過處理，所以在這裡對 css 字首的處理是多餘的，我們可以做如下處理：

//
webpack.prod.config.js
......
const optimizecssplugin = require('
optimize-css-assets-webpack-plugin')
......
newoptimizecssplugin(,
//避免 cssnano 重新計算 z-index
safe: true
, 
//cssnano通過移除注釋、空白、重複規則、過時的瀏覽器字首以及做出其他的優化來工作，一般能減少至少 50% 的大小
//cssnano 整合了autoprefixer的功能。會使用到autoprefixer進行無關字首的清理。預設不相容ios8，會去掉部分webkit字首，比如flex
//所以這裡選擇關閉，使用postcss的autoprefixer功能
autoprefixer: false
}, canprint: 
true
//cssprocessoroptions: config.build.productionsourcemap ? } : 
}),......

再次打包後，你會發現你想要的字首出現了。

即便如此做了，你發現 -webkit-flex:1 這個還是沒有出現，於是有了下面這個檔案

const fs = require('fs'
);const path = require('
path');
const config = require('
../config/index.js');
function resolve(dir) 
function changefile(obj) 
else
); fs.unlink(obj.changefile, function(err) 
else
else
});}})}
});}
// 因為每次打包，css 的檔名都不一樣，所以通過遍歷資料夾來找到 css 檔案
function getfile(obj) 
else
});}
});}var webkit =
var webkithtml =
function cssfix() 
module.exports = cssfix;

這個**是在 npm run build 之後執行的，其作用就是給需要新增 -webkit-flex:x 的地方加上這個。

這個也是無奈之下不得已而為之，我會繼續尋找別的更好的方法，之後再更新了。

2018.10.22 更新：使用 vue-cli 3.0 建立專案，這個問題解決了。

webpack 對 css 壓縮中對字首的處理

C 中對DataSet進行壓縮

對webpack從零配置

webpack對靜態資源的處理

webpack 對 css 壓縮中對字首的處理

C 中對DataSet進行壓縮

對webpack從零配置

webpack對靜態資源的處理

相關推薦