webpack 设置autoprefixer不起作用的问题

背景

近期在学习webpack，用postcss-loader和autoprefixer给css打包样式添加浏览器前缀的时候，无法正常在 css样式中添加浏览器前缀，经过一顿操作，终于知道怎么设置了，现在记录一下

问题

按照教程，在module中添加postcss-loader，然后创建postcss.config.js文件，引入autoprefixer插件

一切都是按照教程来的，但是执行打包后

transform样式并没有添加浏览器前缀,也没有任何报错信息

解决方法

这postcss.config.js里面进行如下设置，即可实现浏览器前缀打包

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

最终效果

成功添加

这里overrideBrowserslist也可以用browsers代替，虽然同样可以达到效果，但是会报错

最终还是会建议你用overrideBrowserslist来代替browsers,这样就不会报错了。