webpack4.x中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容

当前我们在写css样式的时候总是要处理浏览器兼容问题，那就是加前缀问题，可是我们在开发的时候比如：
直接写个：

.className{
   display: flex;
}

想变成下面这种的

.className{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

以下就是配置方法：

安装

添加浏览器前缀需要下载的插件autoprefixer

npm install --save-dev css-loader style-loader postcss-loader autoprefixer

配置webpack.config.js

{
        test: /\.css$/,
        use: [
         {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              minimize: true,
              localIdentName: '[local]_[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader'
          }