Loader

默认情况下，Webpack 只会认识 JavaScript 和 JSON 两种类型的文件， 当 Webpack 需要对其他类型的文件进行处理时，就需要用到 loader。

What's Loader

Webpack 运行于 Node.js 平台之上，而编写 loader 就是在编写一个 Node 模块。

一个 loader 就是一个 function。

loader(x) = y

Options / Params

使用 loader 时传递参数

我们在 Webpack 中配置 loader 时, use 属性可以传入一个对象, 这个对象中有一个 options 属性，利用 options 属性可以传递参数到 loader。

编写 loader 时获取参数

我们在 loader 函数中，访问 this.query 相当于访问 use.options。

在这里使用了 this 关键字，因此我们的 loader 要使用 function 关键字，而不是一个箭头函数。

Utils

pnpm add -D loader-utils

在 loader 代码中调用了回调函数，则不需要我们再使用 return 去返回结果了。

• 同步回调：this.callback(error, result, sourceMap)
• 异步回调：this.async(error, result, sourceMap)
• 添加文件到 Webpack 的依赖树中：this.addDependency(filePath)
• 解析处理文件路径：this.resolve()
• 获取参数：getOptions(this)

Compose

loader 可以依次执行，如果一个 loader 的输出和另一个 loader 的输入在数据类型上是兼容的， 那么这两个 loader 可以进行 compose。