Loader 和 Plugin 有什么本质区别？

在 Webpack 中，Loader 和 Plugin 的本质区别可以概括为：职责不同、工作机制不同、作用范围不同。

如果把 Webpack 比作一条自动化生产线：

Loader 就是生产线上的加工工人/转换工具，负责把原材料（不同格式的文件）加工成统一的标准件（JavaScript 模块）。
Plugin 就是生产线上的监控员/多功能机械臂，它监听整条生产线的生命周期，在特定的时机介入，完成复杂的定制化任务（如压缩代码、清理目录、注入环境变量等）。

详细区别对比

维度	Loader (加载器)	Plugin (插件)
本质定义	文件转换器（Transpiler）	功能扩展器（Extension）
主要职责	将非 JS 文件（或需要预处理的文件）翻译为 Webpack 能识别的 JS 模块。	解决 Loader 无法实现的事情，干预整个构建生命周期。
作用范围	单文件/模块维度（只关注单个文件的输入与输出）。	全局构建维度（关注整个打包过程、构建结果及资源输出）。
工作机制	在模块加载（Load）阶段执行，管道式链式调用（从右往左/从下往上）。	基于事件流框架（Tapable），监听 Webpack 抛出的生命周期 Hook（钩子）。
代码形态	一个导出的 Function，接收源码字符串/Buffer，返回处理后的代码。	一个包含 `apply` 方法的 Class/Object，通过 `compiler` 实例注册钩子。
配置位置	`module.rules` 中配置。	`plugins` 数组中配置（需 `new` 实例化）。

深层次原理解析

1. Loader 的本质：纯函数管道

Loader 本质上是一个 Node.js 模块（函数）。Webpack 默认只能解析 JavaScript 和 JSON。当遇到 .css, .scss, .png, .vue 等文件时，Webpack 会拿着匹配规则去找到对应的 Loader。

Loader 接收源文件内容作为输入，经过处理后，输出新的内容（通常是 JS 代码或 AST），并传递给下一个 Loader 或 Webpack 进行后续解析。

代码形态示例：

javascript

// 一个简单的 Loader
module.exports = function(source) {
  // 对 source（源码）进行处理
  const result = source.replace('world', 'webpack');
  // 返回处理后的代码
  return result;
};

2. Plugin 的本质：基于事件驱动（Tapable）的生命周期监听器

Plugin 的本质是一个类（Class）。Webpack 在整个编译周期中（从初始化、解析、打包、优化到写入磁盘），会触发一系列的生命周期钩子（Hooks）。

Plugin 在初始化时，其 apply 方法会被调用，并接收到 Webpack 的 compiler 对象。Plugin 可以在 compiler 或 compilation 的钩子上注册回调函数，当 Webpack 执行到对应阶段时，就会触发该 Plugin 的逻辑。

代码形态示例：

javascript

// 一个简单的 Plugin
class MyPlugin {
  // 必须包含 apply 方法
  apply(compiler) {
    // 监听 emit 钩子（生成资源到 output 目录之前）
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
      console.log('构建即将完成，准备生成文件...');
      callback();
    });
  }
}
module.exports = MyPlugin;

常见搭配示例

典型的 Loaders：
- babel-loader：将 ES6+ 语法转为 ES5。
- css-loader & style-loader：解析 CSS 并将其注入到 HTML 的 <style> 标签中。
- file-loader / url-loader：处理图片/字体文件（Webpack 5 已内置为 Asset Modules）。
典型的 Plugins：
- HtmlWebpackPlugin：自动创建一个 HTML 文件，并将打包好的 .js/.css 自动引入。
- CleanWebpackPlugin：在每次重新打包前清理 dist 目录。
- MiniCssExtractPlugin：将 CSS 提取为独立的文件（而不是嵌入到 JS 中）。
- DefinePlugin：注入全局环境变量。

总结一句话

需要处理某种特定格式的文件时，用 Loader；
需要在打包过程的某个阶段做某些事（如优化、压缩、提取、注入）时，用 Plugin。

右滑查看面试常问

播面