01

60 秒回答模板

Loader 面向模块内容转换，接收源文件内容，按链式规则从右到左或从后到前执行，最终返回 JS 模块代码或资源描述，比如把 TS、Less、字体资源转成 Webpack 能处理的模块。Plugin 面向构建流程扩展，通过 compiler 和 compilation 的 hooks 参与从初始化、编译、优化到输出的生命周期，可做 HTML 注入、环境变量、资源压缩、产物分析等。简单说，loader 转文件，plugin 管流程。

考点 核心机制与工程取舍
难度 中高频面试题
回答目标 按定义、机制、场景讲清楚
02

深入解析

01

职责边界

loader 解决某类资源如何变成模块的问题；plugin 解决构建过程某个阶段要额外做什么的问题。一个偏局部转换，一个偏全局流程。

02

loader 执行模型

loader 配在 module.rules 中，匹配单个资源后按链式顺序执行。它可以接收源码和 source map，返回转换后的代码，也可以异步处理文件内容。

03

plugin 执行模型

plugin 通常是带 apply 方法的对象或类实例，挂到 plugins 数组。Webpack 启动后把 compiler 传给 apply，plugin 再注册不同生命周期钩子。

04

执行时机差异

loader 主要发生在模块构建阶段，每个匹配模块都会执行；plugin 可贯穿整个构建，从环境初始化、模块解析、chunk 优化到资源输出都能介入。

05

典型场景

babel-loader 处理 JS 语法转换，css-loader 处理 CSS 依赖，style-loader 注入样式；HtmlWebpackPlugin 生成 HTML，DefinePlugin 注入编译期常量，MiniCssExtractPlugin 抽离 CSS。

06

容易混淆点

Webpack plugin 和 Babel plugin 不是同一层概念。Babel plugin 工作在 Babel 转换 AST 的阶段，Webpack plugin 工作在 Webpack 构建生命周期。

03

易错点

  • 不要说 loader 和 plugin 都只是“插件”。面试要明确 loader 是模块转换器，plugin 是构建生命周期扩展。
  • 不要把执行顺序说反。常见 loader 链是从右到左或从后到前处理。
  • 不要把 Babel plugin 当 Webpack plugin。它们工作在不同工具和不同阶段。
  • 不要只举例不讲机制。例子要服务于职责边界和执行时机。
04

面试官追问

loader 为什么通常是链式的？

一个资源可能需要多步转换，例如 Less 先转 CSS，CSS 再解析依赖，最后注入页面或抽离文件。链式设计让每个 loader 只做单一职责。

loader 的 pitch 阶段是什么？

pitch 是 loader 正常执行前的前置阶段，可用于短路后续 loader 或做资源准备。多数业务面试不要求展开，但知道它说明对 loader 流程更熟。

plugin 为什么能力更强？

因为 plugin 能访问 compiler、compilation、assets、chunks、modules 等构建上下文，可以在多个生命周期阶段读写构建状态。

CSS 抽离为什么通常用 plugin？

抽离 CSS 涉及跨模块收集、生成独立 asset、处理 chunk 关系和输出文件，不只是单个 CSS 文件转换，因此需要 plugin 参与产物阶段。