- postcss只处理CSS，概念简洁；
- 提供高拓展性的插件系统支持按需引入不同插件，实现不同处理；
- 使用JavaScript插件，开发者可以很方便定制项目插件；
- 提供CSS节点树API，可以高效的进行CSS处理；
安装
在webpack中使用，需要先安装对应加载器：
npm install --save-dev postcss-loader
插件
postcss目前有200+插件，足够满足绝大部分项目开发需求，可以查看postcss插件，我们介绍几个主要使用的插件。
Autoprefixer
回顾一下在预处理器中，如果我们需要为CSS代码添加属性前缀，需要这么实现呢？对于Sass，我们通常使用mixin，即混合宏，处理CSS属性前缀，如：
// 定义
@mixin prefix-animation($animation-name){
animation:$animation-name;
-webkit-animation:$animation-name;
}
// 使用
body{
@include prefix-animation(loading .5s linear infinite);
}
如上，我们需要按照定义的语法和模板：先定义一个mixin，然后通过@include方式使用，最后才能输出添加前缀的CSS代码，当代码越来越多时，我们需要定义的mixin也会越来越多，而且不同预处理器定义的语法和模板都有差异，学习成本、转换成本都很可能令人难以接受。
那么postcss插件怎么处理的呢？postcss提供了Autoprefixer插件处理CSS属性前缀：
Autoprefixer插件基于Can I Use的数据，对CSS规则进行前缀处理。
安装
首先还是要安装Autoprefixer:
npm install --save-dev autoprefixer
配置
添加如下配置：
module: {
loaders: [
{
test: /\.css$/,
exclude: /node_modules/,
loaders: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
}
}
]
}
]
}
如上，我们知道postcss是一个样式开发解决方案，其特定功能需要引入插件实现，上例中在指定postcss-loader加载器时为其设置了插件配置autoprefixer；当然webpack还支持直接设置一个postcss配置文件，然后在项目根目录创建postcss.config.js配置文件，内容格式如下：
module.exports = {
plugins: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
// or just require('autoprefixer')
]
}
使用autoprefixer插件时可选传入browsers参数，可以设置添加前缀的适配范围，详细可查阅browsers配置说明。