webpack之自动补全css前缀

 css3的属性为什么需要前缀

浏览器的兼容性问题（浏览器的标准尚未统一）

        谷歌：-webkit

        火狐：-moz

        IE：-ms

        欧朋：-o

举个例子：

display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers.*/
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

webpack插件

autoprefixer自动补全css3前缀

1.安装：(配合postcss-loader一起使用)

cnpm i postcss-loader autoprefixer -D

2.配置：

{
    test:/\.css/,
    use:[
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options:{
                plugins:()=>[
                    require('autoprefixer')({
                        overrideBrowserslist: ['last 2 version']  //兼容信息设置
                    })
                ]
            }
        }
    ]
}