Webpack Loader、Plugin 与 Babel 的处理阶段怎么区分？
先理解原理和示例，再练习完整口述与追问。
回答要点
Loader 转换模块内容；Plugin 监听构建生命周期；Babel 解析、转换 AST、生成代码；转语法不等于补运行时 API。
原理拆解
Loader 主要把某类模块内容转换成 Webpack 能继续处理的结果，例如用 babel-loader 调用 Babel 转换 JavaScript，用 css-loader 处理 CSS 导入。普通 Loader 链通常从右往左执行，pitch 阶段另有顺序与短路机制；并不是所有资源 Loader 都必须最终输出相同格式，也不能忽略 Webpack 内置 Asset Modules 等版本能力。
Plugin 通过 compiler、compilation 等钩子参与更广泛的编译流程，可以修改资源、生成 HTML、提取样式、处理报告或控制优化。Loader 更接近单个模块的转换，Plugin 更接近构建过程的扩展；它们可能协作，不能只用“Loader 处理文件，Plugin 优化代码”来概括所有情况。
Babel 通常先 parse 得到 AST，再 traverse/transform 修改树，最后 generate 输出代码和 Source Map。preset-env 按目标环境选择需要的语法转换；把箭头函数转换掉，不代表 Promise、Array.from 等运行时 API 自动存在，这些需要根据配置引入适当的 polyfill。构建配置要同时检查 Node、Webpack、Babel 和插件版本范围，不应在旧项目里直接照抄最新配置。
参考：Webpack Loaders。
示例与推演
处理 .ts 可由 Loader 调用编译转换；统计所有输出资源或生成清单更适合 Plugin 在构建钩子处理。Babel 修改 AST 后生成代码，若中途未传 Source Map，最终堆栈映射会断裂。转换语法与注入 Promise 等 API 的兼容工作应分别配置。
易错点
不能因为某插件名字含 loader 就猜它工作阶段，也不要认为 CSS 和图片都应统一先转 JS 字符串，现代构建能力与版本需核实。
参考回答可直接练习口述
Loader 主要把某类模块内容转换成 Webpack 能继续处理的结果，例如用 babel-loader 调用 Babel 转换 JavaScript，用 css-loader 处理 CSS 导入。普通 Loader 链通常从右往左执行，pitch 阶段另有顺序与短路机制；并不是所有资源 Loader 都必须最终输出相同格式，也不能忽略 Webpack 内置 Asset Modules 等版本能力。