webpack-loader實現一個簡化版gitbook

前言

最近在看weppack-loader，不看不知道，當我翻到markdown-loader的時候，大吃一驚，簡直精簡的不能再精簡了，除去require和export語句，一共就有四行。基本上loader的做用一目瞭然：在js進入執行以前對其作改動。

webpack-loader如何工做

babel-loader是最多見的，做用就是將咱們import的js中的es6語法轉爲es5。

{
    test: /\.js?$/,
    use:[{
        loader:'babel-loader'
    }],
}
複製代碼

經過以上配置，咱們import的全部js文件就都會通過babel-loader處理了，而import的其餘類型文件(例如圖片、css啥的)就不會通過babel-loader處理。

舉個簡單例子：babel-loader會將let、const等ES6的寫法轉爲var，那麼實現的思路極可能就是code = code.replace(/let/g,'var').

詳細請看《深刻淺出webpack》 致敬。

markdown-loader怎麼實現的

代碼：

"use strict";

const marked = require("marked");
const loaderUtils = require("loader-utils");

module.exports = function (markdown) {
    // merge params and default config
    const options = loaderUtils.getOptions(this);

    this.cacheable();

    marked.setOptions(options);

    return marked(markdown);
};

複製代碼

配置markdown-loader後咱們就能夠import md文件了。例如：import md from './README.md'

若是README.md的內容是

# i am title
複製代碼

那麼import獲得的結果是：

<h1>i am title</h1>
複製代碼

怎麼作到的？經過代碼咱們能夠很清楚的發現就是調用了marked這個組件將原始的# i am title轉成了<h1>i am title</h1>，而後return了出去。就這樣這個loader天天有一萬七千次下載。

loader實現gitbook功能

在我看來，loader的最厲害的地方是在於他運行在node環境裏的，能夠調用fs、path等模塊獲取磁盤上的文件信息。再加上loader能夠隨意修改js源碼的功能，那麼天然而然的就想到了gitbook。

gitbook容許用戶編輯markdown文件時，能在瀏覽器中實時預覽markdown文件轉成的html樣式。經過gitbook build命令，用戶編寫的md文件能生成對應的html文件。這樣就能直接發佈到cdn使用了。

因爲webpack配合dev-server自己就具備熱加載和打包的功能，配合loader也能識別md文件。

那麼惟一的缺乏的地方就是如何處理目錄結構，在gitbook中須要用戶維護有一個SUMMARY.md來管理目錄。

而loader由於能調用fs和path模塊，所以咱們能夠將目錄結構直接抽象成文件夾結構，由loader解析文件夾結構抽象出目錄。再也不須要像gitbook那樣維護一個單獨的文件了。

基本思路就是這樣。配合頁面懶加載，即便文章再多，首屏打開速度也能獲得保障。 配。

項目demo

基本流程實現，code解析還不完美。