Loader vs Plugin

1. 面试题

Q: Loader 和 Plugin 的区别是什么？它们各自的使用场景？

2. 核心解答

这两个是 Webpack 扩展能力的核心。

(1) Loader

对模块的转换。 Webpack 本身只知道如何处理 JavaScript 和 JSON 文件。Loader 让 Webpack 能够去处理其他类型的文件 (如 .css, .scss, .ts, .vue, .png)，并将它们转换为 Webpack 能够理解的有效 模块 (Module)。

  • 本质：一个函数。input (source code) -> transform -> output (javascript code)。
  • 执行时机：在 module.rules 中配置，在解析模块时执行。
  • 特点：单一职责，链式调用 (Chainable)，无状态 (Stateless)。
  • 常见 Loader：babel-loader, css-loader, style-loader, file-loader, ts-loader。

(2) Plugin

对构建流程的扩展。 Webpack 在运行生命周期中会广播出许多事件。Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。它的功能范围更广，甚至可以修改编译器 (Compiler) 本身。

  • 本质：一个带有 apply 方法的类。
  • 执行时机：在整个构建生命周期中触发。
  • 特点：基于事件流 (Tapable)，可以接触到 Compiler 和 Compilation 实例。
  • 常见 Plugin：HtmlWebpackPlugin (生成 index.html), DefinePlugin (注入环境变量), CleanWebpackPlugin (清空 dist), MiniCssExtractPlugin (提取 CSS 为独立文件)。

3. 面试加分项

Q: Loader 的执行顺序？

从右到左，或者说 从下到上。

use: ['style-loader', 'css-loader', 'sass-loader']
  1. sass-loader: 把 SCSS 编译成 CSS。
  2. css-loader: 把 CSS 转换成 CommonJS 模块 (处理 @import/url())。
  3. style-loader: 把 JS 字符串生成 style 节点插入 HTML 的 head 中。

Q: 什么时候需要写 Plugin？

当 Loader 无法满足需求时。比如：

  • 在这个构建结果里插入一段版权声明 (BannerPlugin)。
  • 自动上传构建产物到 CDN。
  • 分析包的大小 (BundleAnalyzerPlugin)。

4. 总结

  • Loader: Transform file content (Pure function).
  • Plugin: Hook into lifecycle (Event listener).