webpack4中使用postcss-loader实现自动补全css前缀和兼容下一代css样式

css样式在多浏览器兼容处理上需要开发人员在开发中去hack，很多属性需要添加属性的即私有前缀，作用是为了兼容老版本的写法。

例如：比较新版本的浏览器都支持直接写：border-radius。
fiirefox: -moz-border-radius: 50px 50px;
ie: -ms-border-radius: 50px 50px;
chrome safari : -webkit-border-radius: 50px 50px;

-moz代表firefox浏览器私有属性，-ms代表ie浏览器私有属性，-webkit代表safari、chrome私有属性。

不是所有的属性都要加前缀，但有部分属性必须加前缀，所以很多情况下就需要去查文档了，今天介绍下webpack4中的postcss-loader自动实现这一功能，而且还能对下一代的css样式兼容处理：

安装 postcss postcss-loader

webpack.config.js

{
       test:/\.css$/,
       use:[
        {
          loader: minicss.loader,
 
        },       
         {
          loader:'css-loader' ,
          options:{
            //minimize:true,
           /* modules:{
              localIdentName:'[path]_[name]_[local]_[hash:4]',
              //import
              //minimize
            }*/
          }
         },
         {
          loader:'postcss-loader',
          options:{
            ident:'postcss',
            plugins:[
              require('autoprefixer')(),
              require('postcss-cssnext')(),
              /*require('postcss-sprites')()*/
            ]
          }
         }
       ]
       /*use:extracss.extract({
        fallback:{
          loader:'style-loader',
          options:{
            //insert:"body",
          }
         },
         use: [
           {
            loader:'css-loader' ,
            options:{
              //minimize:true,
              modules:{
                localIdentName:'[path]_[name]_[local]_[hash:4]',
                //import
                //minimize
              }
            }
           }
         ]
       })*/
     },
     

注意： require(‘autoprefixer’)(),
require(‘postcss-cssnext’)(),
调用。