webpack结合postcss-loader实现css样式浏览器兼容前缀的添加

1、引入添加兼容前缀库

npm install postcss-loader autoprefixer@9.8.6 -D              //autoprefixer使用9.8.6版本，笔者亲测，兼容PostCSS依赖的版本。

2、在项目根目录下创建postcss.config.js,配置如下:

module.exports = {
    plugins: [
        require('autoprefixer')()
    ]
}

3、在package.json中要加上bowerlist实现兼容添加

  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ],

4、接下来就可以在webpack Module中新增rule

 {
                test: /.((c|sa|sc)ss)$/i,
                use: [
                    "style-loader",// 将 JS 字符串生成为 style 节点
                    {
                        loader: 'css-loader',
                        options: {
                            // 如果您需要在每个 CSS 的 `@import` 上运行 `sass-loader` 和 `postcss-loader`，请将其设置为 `2`,如果只需要运行postcss-loader ，只需要将importLoaders设置为1
                            importLoaders: 1,
                        },
                    },
                    "postcss-loader",    //自动为css添加前缀
                    "sass-loader"// 将 Sass 编译成 CSS
                ]
            }

注释：1、多引入了一个sass-loader，便于解析sass，如果不需要可以去掉.

　　　2、importLoaders,指的是在scss文件中引入另一个scss，重新执行sass-loader和postcss-loader。

　　　3、role是从下往上执行，也就是sass-loader -> postcss-loader -> css-loader -> style-loader,所以sass-loader要放在最后，并在postcss-loader的下面，只有解析出来scss，才能添加前缀