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解析还不完美。