autoprefixer 补充的css前缀,-webkit-,-ms-,-os-不全，不完整的原因及解决办法

完美解决autoprefixer前缀不全的写法！

在一次使用webpack时，使用到了css3 样式前缀补全功能，

1.先安装 postcss-loader和autoprefixer   

    cnpm i postcss-loader autoprefixer -D

2.填写配置

module:{
       rules:[
           {    // 实现样式文件导入解析
               test:/\.(css|scss|sass|less)$/,
               use:['style-loader','css-loader','sass-loader',{
                   loader:'postcss-loader',
                   options:{
                       plugins:[
                           require('autoprefixer')()
                       ]
                   }
               }]
           },
           
       ]
   }

（1）然后执行打包命令，打包后在控制台查看，

这尼玛就添加了一个-webkit-前缀，

(2)然后我去网上找各种写法，效果也是缺胳膊短腿的，不是少火狐的，就是少ie的，等等

(3)最后自己摸索出了正确的写法，

   {    // 实现样式文件导入解析
               test:/\.(css|scss|sass|less)$/,
               use:['style-loader','css-loader','sass-loader',{
                   loader:'postcss-loader',
                   options:{
                       plugins:[
                           require('autoprefixer')(
                              {
                                browsers: [
                                    'last 10 Chrome versions',
                                    'Firefox >= 3.5',
                                    'Opera >= 11.5',
                                    'ie >8'
                                ]
                              }
                           )
                       ]
                   }
               }]
           },

下面是效果图：

原因分析：

其实browsers里的版本写法是有根据的，比如我这里要给transfrom添加前缀，然后你需要在https://caniuse.com这个网站里查询transfrom在各个浏览器的兼容版本，红色就是不兼容。如

browsers里填写的规则是样式transfrom在各个浏览器能识别的版本，也就是说，在不加前缀的情况下能识别transfrom的版本，根据上面的截图，像大于ie8以后的ie版本，能直接识别transfrom属性，那么针对ie的写法就是 ie > 8，firefox写成firefox>=3.5,其他浏览器类推，

至此，问题解决！

注：本次使用到的autoprefixer版本为9.8.4，如果效果不出来的话先指定安装该版本，减少错误查找