明天分享的内容是如何开发一个复杂的 Webpack Loader，希望经过这个进程可以让你 Get 到 Webpack Loader 的任务原理与机制。
Loader 作为 Webpack 的中心机制，外部的任务原理却十分复杂。接上去我们一同来开发一个本人的 Loader，经过这个开发进程来深化了解 Loader 的任务原理。
这里我的需求是开发一个可以加载 markdown 文件的加载器，以便可以在代码中直接导入 md 文件。我们都应该知道 markdown 普通是需求转换为 html 之后再出现到页面上的，所以我希望导入 md 文件后，直接失掉 markdown 转换后的 html 字符串，如下图所示：
由于这里需求直观地演示，我就不再单首创立一个 npm 模块，而是就直接在项目根目录下创立一个 markdown-loader.js 文件，完成后你可以把这个模块发布到 npm 上作为一个独立的模块运用。
项目结构与中心代码如下所示：
└─ 03-webpack-loader ······················· sample root dir
├── src ································· source dir
│ ├── about.md ························ markdown module
│ └── main.js ························· entry module
├── package.json ························ package file
├── markdown-loader.js ·················· markdown loader
└── webpack.config.js ··················· webpack config file
<!-- ./src/about.md -->
# About
this is a markdown file.
// ./src/main.js
import about from './about.md'
console.log(about)
// 希望 about => '<h1>About</h1><p>this is a markdown file.</p>'
每个 Webpack 的 Loader 都需求导出一个函数，这个函数就是我们这个 Loader 对资源的处置进程，它的输入就是加载到的资源文件内容，输入就是我们加工后的结果。我们经过 source参数接纳输入，经过前往值输入。这里我们先尝试打印一下 source，然后在函数的外部直接前往一个字符串'hello loader ~'，详细代码如下所示：
// ./markdown-loader.jsmodule.exports = source => {// 加载到的模块内容 => '# About\n\nthis is a markdown file.'console.log(source)// 前往值就是最终被打包的内容return 'hello loader ~'}
完成以后，我们回到 Webpack 配置文件中添加一个加载器规则，这里婚配到的扩展名是.md，运用的加载器就是我们刚刚编写的这个 markdown-loader.js 模块，详细代码如下所示：
// ./webpack.config.jsmodule.exports = {entry: './src/main.js',output: {filename: 'bundle.js' },module: {rules: [ {test: /\.md$/, // 直接运用相对途径use: './markdown-loader' } ] }}
TIPS：这里的 use 属性不只可以运用模块称号，还可以运用模块文件途径，这点与 Node 中的 require 函数是一样的。
配置完成后，我们再次翻开命令行终端运转打包命令，如下图所示：
打包进程中命令行确实打印出来了我们所导入的 Markdown 文件内容，这就意味着 Loader 函数的参数确实是文件的内容。
但同时也报出了一个解析错误，说的是：You may need an additional loader to handle the result of these loaders.（我们能够还需求一个额外的加载器来处置应前加载器的结果）。
那这终究是为什么呢？其实 Webpack 加载资源文件的进程相似于一个任务管道，你可以在这个进程中依次运用多个 Loader，但是最终这个管道完毕事先的结果必须是一段标准的 JS 代码字符串。
(责任编辑：admin)