1 Loader 和 Plugin 含义
Q1 Webpack 中的 Loader 和 Plugin 是什么
A:
1.1 Loader 含义和作用:
-
本质上是一个 transformer转换器，主要用于 处理文件的转换和加载
-
它是一个纯函数，接收源文件内容，输出 转换后的结果
-
因为webpack 默认只支持 JS 和 JSON 类型的文件，通过Loader，就可以让其他类型的文件 被转换为 JS模块，从而能够被 webpack 处理
1.2 Loader的特点
- 可以被链式调用，从后往前执行
- 支持同步和异步执行
- 模块化，一个 loader 只做一件事==> 纯函数特点1
- 无状态，每次运行都独立于其他编译结果==> 纯函数特点2
2.1 Plugin 含义和作用:
- 本质上是一个 EventListener事件监听器
- 它是一个带有 apply 方法的类，该方法 会接收一个 compiler 对象
- 它可以通过事件钩子，介入到 webpack的 各个编译周期过程中，执行各种 自定义拓展任务
2.2 Plugin 的特点
- 基于事件流框架 Tapable，可以在 webpack 不同生命周期中挂载任务
- 支持异步操作，通过 callback 或返回 Promise
2 Loader 和 Plugin 的区别
Q1 Webpack 中的 Loader 和 Plugin 的区别是什么
A:
S1 功能范围不同
- loader: 主要负责 文件的转换/ 预处理
- plugin: 可以通过暴露的钩子函数，执行各种扩展任务
S2 执行时机不同
- loader: 主要在 模块解析和构建阶段 执行
- plugin: 在 webpack运行的 不同生命周期阶段 执行，如启动(run)、编译(compile)、生成(emit)、完成(done)等多个阶段
S3 运行机制不同
- Loader 是单向链式调用，按照配置从后往前执行，上一个 Loader 的结果会传给下一个 Loader
- Plugin 是基于事件机制工作，可以监听整个生命周期，在多个事件点上同时工作
S4 抽象层次不同
- loader: 在文件级别工作，处理单个资源文件
- plugin: 在编译级别工作，影响整体构建流程
选择用 loader 还是 plugin的 直观判断依据
- 如果需要 转换/预处理 某种类型的文件，使用 loader
- 如果需要 影响整个构建过程，使用 plugin
即 loader是 “文件级别的 转化器”，plugin是 “构建过程的 扩展器”
