PostCSS介紹
PostCSS本身是一個(gè)功能單一的工具巾陕，提供了用JavaScript處理CSS的方法。它負(fù)責(zé)把CSS代碼解析成抽象語法樹結(jié)構(gòu)（Abstract Syntax Tree,AST）, 再交由插件來進(jìn)行處理揣炕。插件的功能多種多樣，比如可以支持變量和混入（mixin）,增加瀏覽器相關(guān)的聲明前綴族阅，或者是把CSS新規(guī)范轉(zhuǎn)譯成當(dāng)前的CSS規(guī)范支持的格式，目前 PostCSS 已經(jīng)有 200 多個(gè)功能各異的插件膝捞。開發(fā)人員也可以根據(jù)項(xiàng)目的需要坦刀，開發(fā)出自己的 PostCSS 插件。
PostCSS 從其誕生之時(shí)就帶來了社區(qū)對(duì)其類別劃分的爭(zhēng)議蔬咬。這主要是由于其名稱中的 post鲤遥，很容易讓人聯(lián)想到 PostCSS 是用來做 CSS 后處理（post-processor）的，從而與已有的 CSS 預(yù)處理（pre-processor）語言林艘，如 SASS 和 LESS 等進(jìn)行類比盖奈。實(shí)際上，PostCSS 的主要功能只有兩個(gè)：
- 第一個(gè)就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST
- 第二個(gè)就是調(diào)用插件來處理 AST 并得到結(jié)果狐援。因此钢坦，不能簡(jiǎn)單的把 PostCSS 歸類成 CSS 預(yù)處理或后處理工具。PostCSS 所能執(zhí)行的任務(wù)非常多啥酱，同時(shí)涵蓋了傳統(tǒng)意義上的預(yù)處理和后處理爹凹。PostCSS 是一個(gè)全新的工具，給前端開發(fā)人員帶來了不一樣的處理 CSS 的方式镶殷。
使用PostCSS
PostCSS既可以在命令行中直接使用禾酱，也可以與構(gòu)建工具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 抽離出來生成一個(gè)文件
}]
},
plugins: [
new ExtractTextPlugin("css/index.css"),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer()
]
}
})
]
}
