前言

最近在看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').

详细请看 致敬。

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得到的结果是：

i am title
复制代码

怎么做到的？通过代码我们可以很清楚的发现就是调用了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那样维护一个单独的文件了。

基本思路就是这样。配合页面懒加载，即使文章再多，首屏打开速度也能得到保障。 配。

基本流程实现，code解析还不完美。