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 = {
 ......
  postcss: [
    require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })
  ]
}

经过以上处理，打包后的 css 应该就拥有合适的前缀了，但并不如此，原因是在打包过程中，css 有个压缩动作，在这个动作中，压缩插件（用的是 optimize-css-assets-webpack-plugin 这个插件）会再一次对 css 的前缀做处理，会将它认为不需要的代码（如不需要的 css 前缀）去掉。因为前面已经用 postcss 对 css 的前缀做过处理，所以在这里对 css 前缀的处理是多余的，我们可以做如下处理：

// webpack.prod.config.js

......
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

......

new OptimizeCSSPlugin({
    cssProcessor: require('cssnano'),
    cssProcessorOptions: {
    discardComments: { removeAll: true },
    // 避免 cssnano 重新计算 z-index
    safe: true,
    //cssnano通过移除注释、空白、重复规则、过时的浏览器前缀以及做出其他的优化来工作，一般能减少至少 50% 的大小
    //cssnano 集成了autoprefixer的功能。会使用到autoprefixer进行无关前缀的清理。默认不兼容ios8，会去掉部分webkit前缀，比如flex
    //所以这里选择关闭，使用postcss的autoprefixer功能
    autoprefixer: false
    },
    canPrint: true
    //cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true }
}),

......

再次打包后，你会发现你想要的前缀出现了。