九、postcss-loader的使用（帮助我们添加厂商前缀）------ 2019-04-24

一、作用：postcss-loader中的autoprefixer插件，可以帮助我们自动给那些可以添加厂商前缀的样式添加厂商前缀（ -webkit   -moz   -ms   -o ）；

二、安装：postcss-loader安装：npm install postcss-loader -D;

由于postcss-loader需要autoprefixer插件，因此我们还需要安装autoprefixer插件：

npm install autoprefixer -D

三、配置：

（1）配置postcss-loader：

因为，postcss-loader是帮助我们给样式属性添加厂商前缀的，因此，这个loader可以和css-loader放在一起使用 ，不过这个loader要放在css-loader和sass-loader之前；

（2）由于postcss-loader是借助autoprefixer插件给我们的css属性添加厂商前缀的，因此，postcss-loader是有一个单独的配置文件的，配置文件的名字是 postcss.config.js,和webpack.config.js同级；

四、样式文件打包调用loader的顺序：

当我们对样式文件进行打包时，webpack会查看自己的配置文件中的module节点中的规则，去查找有没有处理对应文件的loader，没有，打包失败；发现有处理样式文件的loader后，按照loader “从右向左，从下向上” 的顺序，

（1）先调用postcss-loader，然后postcss-loader发现自己添加不了，就去借助自己的autoprefixer插件，对需要添加厂商前缀的css属性添加前缀；

（2）然后将添加了厂商前缀的样式文件，根据后缀是普通样式表或者说sass、less样式表，按照顺序依次交个对应loader处理；最终生成浏览器能够解析的css文件；