请解释 Webpack 中 Loader 和 Plugin 各自的作用，并说明它们之间的主要差异。

回答思路

1. 【回答框架 1】Loader 是模块转换器，本质是一个函数，接收源文件内容作为参数，返回转换后的内容。它用于在模块加载时对文件进行预处理，例如将 TypeScript 转译为 JavaScript、将 Sass 编译为 CSS、将图片转为 base64 等。Loader 在 module.rules 中配置，通过 test 匹配文件类型，并按数组顺序从右到左执行。
2. 【回答框架 2】Plugin 是更强的扩展机制，可以监听 Webpack 打包生命周期中的各种事件（如 compilation、emit 等），从而在构建过程中执行更广泛的任务，例如打包优化、资源管理、环境变量注入等。Plugin 通过构造函数实例化，在 plugins 数组中配置，需要 apply 方法并在其内部注册钩子。
3. 【回答框架 3】关键区别：Loader 只能处理单个文件，在模块加载阶段运行，专注于文件内容转换；Plugin 则可以作用于整个构建过程，能访问编译对象，执行更复杂的操作。开发上，Loader 是简单函数，Plugin 是类；使用上，Loader 在 rules 中配置，Plugin 在 plugins 中配置。
4. 【关键点 1】Loader 是文件转换器，处理单个模块内容；Plugin 是构建流程扩展，作用于整个打包过程。
5. 【关键点 2】Loader 在 module.rules 中按从右到左顺序执行；Plugin 在 plugins 数组配置。
6. 【关键点 3】Loader 本质是函数，Plugin 是类，需要实现 apply 方法并监听钩子。
7. 【易错点 1】混淆执行时机：Loader 在模块加载时执行，Plugin 在构建生命周期钩子中执行。
8. 【易错点 2】误以为 Plugin 能替代 Loader 进行文件内容转换，但 Plugin 通常不直接修改文件内容。
9. 【易错点 3】忽略 Loader 的执行顺序：多个 Loader 从右往左执行，顺序错误可能导致转换错误。