webpack 5中postcss-loader配置使用autoprefixer

以前在webpack 3中我使用autoprefixer配置如下：

postcssOptions:{
  plugins:[
    ...
    require('autoprefixer')({
       browsers: ['last 2 version', '>1%']
    })
  ]
}

在新搭的项目中使用的webpack 5，结果编译时收到了如下的警告：

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option can cause errors. Browserslist config can
be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

看了久了没有搭过前端工程，原来现有post-css使用autoprefixer的方式已经有了较大的升级，根据警告中提供的资料，整理除了具体的升级方式，步骤如下：

1、安装依赖：

yarn add postcss-loader postcss-preset-env -d

2、添加package.json的browserslist配置：

（也可以使用.browserslistrc文件来实现配置）

"browserslist": {
    "development": [
      "last 1 chrome version"
    ],
    "production": [
      "> 1%",
      "last 2 versions",
      "ios 7"
    ]
}

这样方便实现不同插件之间的配置共享，如babel等。缺点嘛，配置碎片化...

3、npm命令添加环境变量配置：

"scripts": {
    "build": "cross-env NODE_ENV=development webpack --config webpack.dev.config.js"
    "build": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js"
},

4、webpack中postcss-loader的配置修改：

{
   loader: 'postcss-loader',//扩展 CSS 语法，可以配合 autoprefixer 插件自动补齐 CSS3 前缀。
   options: {
   postcssOptions: [
     ...
     'autoprefixer'
   }
}

这样可以看到打包出的css文件已经自动添加前缀：

//前
display: flex
//后
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex