1.安装

案例续上一节的代码，在样式中flex、backface-visibility都存在兼容性问题。
postcss-loader
postcss-preset-env插件已经包含了autoprefixer。它通过读取package.json文件的browserslist字段来给css添加兼容性，其读取字段也和process.env.NODE_ENV有关，和webpack的mode无关。

npm i postcss postcss-loader postcss-preset-env -D

2.package.json

browserslist配置详情

{
  "...": "...",
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

• last 1 chrome version：兼容最近一个chrome浏览器版本。
• >0.2%：大于99.8%的浏览器。
• not dead：不要已经死的浏览器，比如IE10。
• not op_mini all：op_mini浏览器已经很少用了，不去兼容。

3.webpack.config.js

webpack.config.js
这里故意没有给less加兼容性，可以看build后的文件区别。

// ...
// 默认读取的是production
process.env.NODE_ENV = 'development'
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: { plugins: ['postcss-preset-env'] },
                        },
                    }
                ],
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                ],
            }
        ]
    },
    // ...
}