2016.11.24 更新:
css-loader@0.26.0 版本已经解决了这个问题

---

今天在用 flex 布局的时候, 需要兼容低版本 IOS, 于是用 webpack 的 autoprefixer 做前缀兼容处理, 但是发现, 在开发环境时是好的, 但是生产环境时, 布局就出了问题, 检查 CSS 文件, 发现在生产环境下, 部分兼容性样式被删除

对比了开发环境和生产环境, 不同的地方就是开发环境用了extract-text-webpack-plugin做css合并, 初步怀疑就是这个造成的.

于是乎在extract-text-webpack-plugin, postcss-loader, css-loader的 ISSUES 各种找原因, 最终在css-loader中找到:

By default the css-loader minimizes the css if specified by the module system.

In some cases the minification is destructive to the css, so you can provide some options to it. cssnano is used for minification and you find a list of options here. Just provide them as query parameter: i. e. require("css-loader?-autoprefixer") to disable removing of deprecated vendor prefixes.

解决方法就是:

{
     test: /\.css$/,
     loader: 'style!css?-autoprefixer!postcss'
}

{
     test: /\.css$/,
      loader: ExtractTextPlugin.extract(['css?-autoprefixer', 'postcss'])
}

给css-loader加上-autoprefixer的参数, 这样css-loader在压缩css文件时, 就不会去除兼容性前缀了