2-3 (webapack4 loader)-使用PostCSS处理浏览器前缀

在处理浏览器的兼容性问题时，我们需要加一些浏览器前缀，一般情况下，我们都是在css文件里手动添加的，如果使用PostCSS处理浏览器前缀，就可以自动添加浏览器前缀。

1)首先，我们要安装loader。
需要安装postcss-loader 和 autoprefixer
打开终端，进入到项目文件夹的路径，输入命令cnpm install postcss-loader autoprefixer --save-dev

2)在webapack.config.js里配置loader，代码如下：

module:{
		rules:[
			{
				test:/\.scss$/,
				use:['style-loader','css-loader','sass-loader',{
					loader:'postcss-loader',
					options:{
						plugins:[
							require("autoprefixer")({
								browsers:[
									'ie >= 8',//ie版本大于等于ie8
									'Firefox >= 20',//Firefox版本大于等于20版本
									'Safari >= 5',//Safari版本大于等于5版本
									'Android >= 4',//Android版本大于等于Android4
									'Ios >= 6',//Ios版本大于等于Ios6
									'last 4 version'//浏览器最新的4个版本
								]
							})
						]
					}
				}]
			}
		]
	}

3）在终端输入npm run dev进行打包，完成后，如果有需要写浏览器兼容的属性，就会自动加上浏览器前缀啦。如下图所示：
或者，还可以在package.json里加入以下设置：

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

和上面在webapack.config.js里配置loader达到的效果一样。