Loader 作为 Webpack 的核心机制,内部的工作原理却非常简单。
每个 Webpack 的 Loader 都需要导出一个函数,这个函数就是我们这个 Loader 对资源的处理过程,它的输入就是加载到的资源文件内容,输出就是我们加工后的结果。我们通过 source 参数接收输入,通过返回值输出。
对于返回的输出,有两种思路:
- 直接在这个 Loader 的最后返回一段 JS 代码字符串;
- 再找一个合适的加载器,在后面接着处理我们这里得到的结果
Webpack 加载资源文件的过程类似于一个工作管道,你可以在这个过程中依次使用多个 Loader,但是最终这个管道结束过后的结果必须是一段标准的 JS 代码字符串。
// ./markdown-loader.js
const marked = require(‘marked‘)
module.exports = source => {
const html = marked(source)
// const code = `module.exports = ${JSON.stringify(html)}`
const code = `export default ${JSON.stringify(html)}`
return code
}