PostCSS

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()
                ]
            }
        })
    ]
}