在 Webpack 构建流程中，自定义 Loader 和 Plugin 分别需要遵循哪些实现规范？请说明它们的核心机制（如 Loader 的链式调用与 Plugin 的钩子系统），并描述编写一个自定义 Loader 和一个自定义 Plugin 的基本步骤与关键要点。
考察说明
考查对 Webpack 扩展机制的理解，包括 Loader 和 Plugin 的实现原理、应用场景及编写方法。
回答思路
- 【回答框架 1】Loader 是导出为函数的模块，负责对模块源码进行转换，支持链式调用，从右向左执行。每个 Loader 接收前一个 Loader 的结果或原始文件内容，通过 this 上下文访问 Webpack 提供的 API（如 this.async、this.callback、this.emitFile）。编写时需导出函数，接收 source 参数，返回处理后的内容或调用 this.callback 传递多个结果。
- 【回答框架 2】Loader 的职责是单一的，只做文件转换，不产生副作用。常见用途包括编译 TypeScript、处理样式、加载图片等。编写时需关注缓存（默认可缓存，可通过 this.cacheable 控制）、异步处理（使用 this.async 或返回 Promise）、以及如何获取配置选项（通过 this.getOptions）。
- 【回答框架 3】Plugin 是一个类，实例化时接收 options 参数，并在 apply 方法中接收 compiler 对象，通过 compiler.hooks 注册钩子函数，影响 Webpack 的构建流程。常见钩子如 emit、done、compilation 等。编写时需定义 apply 方法，在合适的时机执行自定义逻辑，例如生成额外文件、优化输出、注入代码等。
- 【回答框架 4】实现自定义 Plugin 的关键是理解 compiler 和 compilation 的生命周期。compiler 代表整个 Webpack 配置，compilation 代表一次构建。插件可以在 compiler 的钩子上监听事件，也可以在 compilation 的钩子上操作模块和资源。通常使用 tapable 提供的钩子类型（如 SyncHook、AsyncSeriesHook）来挂载回调。
- 【回答框架 5】编写 Loader 和 Plugin 时都需注意支持配置、错误处理、与 Webpack 版本的兼容性。建议使用官方文档中的规范，并参考现有开源插件的实现。调试时可通过 console.log 或 debugger 在构建过程中输出信息，但要避免在生产环境遗留调试代码。
- 【关键点 1】Loader 是函数，接收源码并返回转换后的结果，支持链式调用，可通过 this 获取 API。
- 【关键点 2】Loader 通过 this.callback 传递多值，处理异步需使用 this.async 或返回 Promise。
- 【关键点 3】Plugin 是带有 apply 方法的类，在 apply 中通过 compiler.hooks 注册回调。
- 【关键点 4】理解 compiler 与 compilation 的钩子区别，选择正确的时机执行插件逻辑。
- 【关键点 5】编写插件时需考虑缓存、错误处理和配置传递。
- 【易错点 1】Loader 中不能使用箭头函数，因为需要访问 this 上下文。
- 【易错点 2】Plugin 的 apply 方法必须在实例上定义，且钩子注册要在正确的时机，否则可能错过事件。
- 【易错点 3】异步 Loader 若不调用 this.async 或返回 Promise，会导致构建卡住或报错。