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'}
}

在项目根目录创建 postcss.config.js

在项目根目录创建 postcss.config.js，并且设置支持哪些浏览器，必须设置支持的浏览器才会自动添加添加浏览器兼容

module.exports = {
    plugins: [
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
    ]
};