# webpack-plugins-demo

**Repository Path**: chrisworkalx/webpack-plugins-demo

## Basic Information

- **Project Name**: webpack-plugins-demo
- **Description**: 关于webpack loader插件介绍等
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-29
- **Last Updated**: 2024-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> Webpack 的执行过程中提供了许多钩子（Hooks），这些钩子可以帮助开发者在构建过程的各个阶段执行自定义逻辑。Webpack 的插件大多依赖这些钩子来执行特定任务。

> 这些钩子分为几类，主要由 Webpack 提供的 Compiler 和 Compilation 两个核心对象负责。Compiler 表示整个 Webpack 构建生命周期，而 Compilation 则表示单次构建的过程。

1. **`Compiler` 钩子**
   `Compiler` 对象代表了 `Webpack` 的完整构建过程。以下是一些关键的 `Compiler` 钩子：

- `environment`: 在设置构建环境时触发。在 Webpack 配置被解析后，最早触发的钩子之一。

- `afterEnvironment`: 环境设置完成后触发。

- `entryOption`: 在解析 `Webpack` 配置中的入口点（`entry`）选项时触发。

- `beforeRun`: 在 `Webpack` 构建开始之前触发。

- `run`: 在构建过程启动时触发。

- `beforeCompile`: 编译构建过程开始之前触发，可以用于准备编译阶段的工作。

- `compile`: 编译开始时触发。

- `thisCompilation`: 在一个新的 `Compilation` 创建时触发，可以用于注册与 `Compilation` 相关的钩子。

- `compilation`: 在 `thisCompilation` 之后立即触发，允许插件注册更广泛的编译过程钩子。

- `make`: 在 `Webpack` 构建开始创建依赖图之前触发，用于处理额外的构建逻辑。

- `afterCompile`: 编译完成后触发，此时所有模块和依赖已经处理完毕。

- `emit`: 在生成输出文件到文件系统之前触发，可以用于修改或添加文件。

- `afterEmit`: 输出文件已经生成并写入文件系统后触发。

- `done`: 构建完成时触发，表示一次完整的构建过程结束。

- `failed`: 构建失败时触发。

- `invalid`: 在观察模式（`watch mode`）下，当文件发生更改导致构建失效时触发。

- `watchRun`: 在观察模式下，每次重新构建开始前触发。

2. **`Compilation` 钩子**
   > `Compilation` 对象代表了一次特定的构建过程，包含了构建时的所有模块、资源、依赖关系等信息。以下是一些关键的 `Compilation` 钩子：

```js
buildModule: 在模块开始构建时触发。

normalModuleLoader: 在一个模块加载器（Loader）处理模块时触发。

optimizeDependencies: 在依赖优化阶段触发，允许插件对模块间的依赖进行优化。

optimize: 在编译的优化阶段触发，比如进行代码压缩等优化操作。

seal: 在所有模块都处理完毕，准备生成输出时触发。

optimizeChunks: 在优化代码块（chunks）时触发。

optimizeModules: 在优化模块时触发。

afterOptimizeChunks: 在代码块优化完成后触发。

afterOptimizeModules: 在模块优化完成后触发。

beforeHash: 在生成文件内容哈希值之前触发。

afterHash: 在生成哈希值之后触发。

beforeModuleIds: 在分配模块 ID 之前触发。

beforeChunkIds: 在分配代码块 ID 之前触发。

beforeCodeGeneration: 在生成代码之前触发。

afterCodeGeneration: 在代码生成完成后触发。

beforeModuleAssets: 在生成模块的资产（assets）之前触发。

processAssets: 处理输出资产时触发，这是一个非常灵活的钩子，支持多个阶段（如 processAssets.stage.X，其中 X 可以是某个特定阶段的标识）。

afterProcessAssets: 在所有资产处理完成后触发。

record: 在记录 Webpack 构建信息时触发。

additionalAssets: 在生成额外资产时触发，比如动态生成的新文件。

finishModules: 在所有模块构建完成后触发。
```

3. **`Compiler` 和 `Compilation` 钩子区别**
   Compiler 钩子: 处理构建过程中的全局事件，比如开始构建、完成构建、文件变更等，适用于影响整个构建过程的插件。

Compilation 钩子: 处理与单次编译相关的事件，主要在编译阶段使用，适用于处理模块、依赖、代码块、资产等细节的插件。