webpack配置根据浏览器自动添加css前缀的loader

1.安装 postcss-loader autoprefixer

npm install postcss-loader autoprefixer --save-dev

2.配置webpack.config.js

以css示例,less与sass中配置类似

module.exports={
    //...code
    module:{
        rules:[
            {
                //匹配规则
                test:/\.css$/,
                //loader加载顺序 不能颠倒
                use: ['style-loader', 'css-loader',{
                    loader:'postcss-loader',
                    options:{
                        plugins:[
                            require('autoprefixs')
                        ]
                    }
                }]
            }
        ]
    }
}

3. 修改package.json

增加如下内容

    "browserslist": [
        "ie>=8",
        "Firefox>=20",
        "Safari>=5",
        "Android>=4",
        "Ios>=6",
        "last 4 version"
    ]

4. 使用方式

通过直接引入配置了postcss-loader的文件

import "xxxx/xx.css"