PostCSS介绍
PostCSS本身是一个功能单一的工具，提供了用JavaScript处理CSS的方法。它负责把CSS代码解析成抽象语法树结构（Abstract Syntax Tree,AST）, 再交由插件来进行处理。插件的功能多种多样，比如可以支持变量和混入（mixin）,增加浏览器相关的声明前缀，或者是把CSS新规范转译成当前的CSS规范支持的格式，目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。
PostCSS 从其诞生之时就带来了社区对其类别划分的争议。这主要是由于其名称中的 post，很容易让人联想到 PostCSS 是用来做 CSS 后处理（post-processor）的，从而与已有的 CSS 预处理（pre-processor）语言，如 SASS 和 LESS 等进行类比。实际上，PostCSS 的主要功能只有两个：
- 第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST
- 第二个就是调用插件来处理 AST 并得到结果。因此，不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。PostCSS 是一个全新的工具，给前端开发人员带来了不一样的处理 CSS 的方式。
使用PostCSS
PostCSS既可以在命令行中直接使用，也可以与构建工具Gulp,Grunt,以及webpack集成使用。下面将介绍如何在webpack中使用PostCSS的Autoprefixer插件。
const webpack = require('webpack')
const path = require('path')
const autoprefixer = require('autoprefixer')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
entry: path.join(__dirname, 'script/index.js'),
output: {
path: path.join(__dirname, '../public/js'),
filename: 'index.js'
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader", "postcss-loader"]
}) //把 css 抽离出来生成一个文件
}]
},
plugins: [
new ExtractTextPlugin("css/index.css"),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer()
]
}
})
]
}
