loader-runner

Webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文件类型并且把它们转化成有效的模块（解析器），并且可以添加到依赖图中。

本身是一个函数，接受源文件作为参数，返回转换的结果。

loader 可以是异步的，也可以是同步的，同步的则直接返回处理后的模块内容，异步则调用异步回调函数输出处理后的模块内容。

loader 基础

loader 本质是一个函数，通过接受处理的函数，然后返回处理后的结果。

module.exports = function (content, sourcemap) {
  // 处理 content 操作。..
  return content
}

示例最后通过 return 返回了 loader 处理后的数据。但其实这并不是推荐写法，在大多数情况下，推荐使用 this.callback 方法去返回数据。

module.exports = function (content, sourcemap) {
  // 处理 content 操作。..
  this.callback(null, content)
}

this.callback 可以传入四个参数（其中后两个参数可以省略），分别是：

• error：当 loader 出错的时向外抛出一个 Error 对象，成功则传入 null
• content：经过 loader 编译后需要导出的内容，类型可以是 String 或者 Buffer
• sourceMap：为方便调试编译后生成的内容的 source map
• ast：本次编译后生成的 AST 静态语法树，之后执行的 loader 可以直接使用这个 AST，可以省去重复生成的 AST 的过程。

Tips：在编写 loader 的时候，如果要使用 this.callback 或者 loader-utils 的 getOptions 等方法，this 是 webpack 调用 loader 时候传入的自定义特殊上下文，所以不能使用箭头函数。

Loader 处理异步数据

Loader 中提供了两种异步写法：