此篇為webpack處理文件內(nèi)容——babel插件保姆級(jí)教學(xué)姐妹篇

前言

本文旨在編寫出postcss8.0插件，將css中的http:替換成https:。

AST

把代碼轉(zhuǎn)成AST：https://astexplorer.net/#/2uBU1BLuJ1

• 代碼

.hello {
    color: green;
    font-size: 64px;
    background:url(http://xxxxxxx) no-repeat fixed;
    background-size: 100% auto;
}

• AST

  
  
  background
  
  

  我們要分析的這個(gè)backaground節(jié)點(diǎn)的type為decl。

• AST節(jié)點(diǎn)類型
  實(shí)際上PostCSS將CSS解析為節(jié)點(diǎn)樹之后，節(jié)點(diǎn)有5種type

Root：樹頂部的節(jié)點(diǎn)，代表CSS文件。
AtRule：語句以@like@charset "UTF-8" 或@media (screen) {}。開頭
Rule：內(nèi)部帶有聲明的選擇器。例如input, button {}。
Declaration：鍵值對(duì)，例如color: black；
Comment：獨(dú)立評(píng)論。選擇器中的注釋，規(guī)則參數(shù)和值存儲(chǔ)在節(jié)點(diǎn)的raws屬性中。

————
為什么要更新postcss呢？
postcss 8.0有好多很棒的改進(jìn)，詳細(xì)的看PostCSS 8.0:Plugin migration guide。

比如之前運(yùn)行插件，即使只改了一點(diǎn)點(diǎn)，它也會(huì)遍歷CSS包的整個(gè)抽象語法樹，如果有很多個(gè)PostCSS插件就會(huì)遍歷很多次，速度慢。

所以這次的大版本還是十分值得更新的。
————

配置

我的插件叫postcss-tran-http-plugin，這個(gè)postcss-是那個(gè)官方文檔強(qiáng)調(diào)的命名方式。

• 特別地
  現(xiàn)在postcss 8.0改變了寫插件的方式，如果之前項(xiàng)目有裝過postcss，可以卸了裝個(gè)新的。

npm uninstall postcss
npm install postcss --save-dev

• webpack.config.js
  use的執(zhí)行順序是右到左

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
            },
        ]
}

• package.json

{
  "peerDependencies": {
    "postcss": "^8.0.0"
  }
}

peerDependencies是為了cover這個(gè)場(chǎng)景：
有人要用我寫的postcss插件，需要安裝postcss。用這個(gè)方法去指定我所要求的那個(gè)postcss版本，以避免版本不匹配可能造成的bug。

• postcss.config.js
  之前這個(gè)plugins是個(gè)對(duì)象，打包出錯(cuò)特地翻了一下文檔才發(fā)現(xiàn)變成數(shù)組了。

module.exports = {
    plugins: [
          require('./plugins/postcss-tran-http-plugin.js')
    ]
}

插件編寫

module.exports = (opts) => {
    return {
        postcssPlugin: 'postcss-tran-http-plugin',
        Declaration(decl) {
            console.log('Declaration');
            let oldVal = decl.value;
            if (oldVal.match(/http:\/\/([\w.]+\/?)\S*/)) {
                let newVal = oldVal.replace(/http:\/\//g, 'https://');
                decl.value = newVal;
            }
        },
    };
};
module.exports.postcss = true;

• 簡(jiǎn)單說一下
  跟babel插件一樣，針對(duì)不同的type類型有不同的處理函數(shù)。
  上面我們說到這個(gè)節(jié)點(diǎn)類型為Declaration，也就是鍵值對(duì)。
  讀值用decl.value，然后給他直接賦值成新的值就ok了。

結(jié)果

• 代碼

// style.css 
body {
    background: darkcyan;
}
.hello {
    color: green;
    font-size: 64px;
    background:url(http://xxxxxxx) no-repeat fixed;
    background-size: 100% auto;
}

• 打包后

  
  

寫postcss插件其實(shí)還好，節(jié)點(diǎn)類型不多，修改也簡(jiǎn)單。
值得關(guān)注的就是升級(jí)到8.0之后postcss.config.js、插件編寫、依賴庫的引用都有變動(dòng)。

參考：
今天！從零開始調(diào)試webpack PostCSS插件
Writing a PostCSS Plugin
http://echizen.github.io/tech/2017/10-29-develop-postcss-plugin
https://www.cnblogs.com/wonyun/p/9692476.html