【Webpack原理】
Webpack 是一个模块打包工具，其核心模块 `tapable` 提供了事件流机制，使得各种插件可以参与到构建过程中。Webpack 的工作流程主要基于一系列的"钩子"，这些钩子分为同步（Sync）和异步（Async）两大类，进一步细分为同步串行、同步跳出、同步瀑布、同步循环、异步并行和异步串行等不同类型。这些钩子允许插件在特定阶段介入，执行自定义操作。
1. **SyncHook**：同步串行执行，不关心返回值，按照注册顺序执行。
2. **SyncBailHook**：同步串行，遇到非空返回值则停止执行后续函数。
3. **SyncWaterfallHook**：同步串行，上一个函数的返回值作为参数传递给下一个函数。
4. **SyncLoopHook**：同步串行，返回 `true` 继续执行当前函数，返回 `undefined` 结束循环。
5. **AsyncParallelHook**：异步并行执行，支持回调和Promise。
6. **AsyncSeriesHook**：异步串行执行，同样支持回调和Promise。
**Compiler 和 Compilation**
- **Compiler**：代表一个 Webpack 实例，包含所有配置信息，全局唯一，初始化后在构建生命周期中传递。
- **Compilation**：编译实例，文件变动时创建，包含了输入、输出资源和变更信息，提供API以监听构建过程中的事件。
**Webpack构建流程**
1. 解析所有模块及其依赖，直到没有依赖为止。
2. 将解析后的模块封装到一个函数中，放入 `modules` 数组。
3. 将 `modules` 传入自执行函数，已执行模块存储在 `installedModules` 对象中。
4. 使用 `webpack__require` 函数加载模块。
**Webpack插件与Loader的区别**
- **Plugin**：更底层，可以在整个构建生命周期的特定阶段介入，执行复杂的操作，例如修改输出、优化资源等。
- **Loader**：主要用于模块转换，如将ES6转为ES5，或CSS预处理器转换，它们是单向的，一个接一个地处理模块。
**编写插件示例**
1. 去除打包生成的JS中多余的注释：
插件可以通过监听 `compilation` 钩子，访问到生成的chunk，然后对chunk的源码进行处理，移除注释。
2. 扩展功能：
可以实现例如添加版权信息、自动压缩代码、合并多个CSS文件等功能，这需要根据实际需求，监听合适的钩子，并实现相应的处理逻辑。
总结，Webpack 的强大在于其高度可扩展性，通过 `tapable` 模块提供的钩子系统，开发者可以自定义构建流程，实现各种代码优化、资源管理和定制化功能。同时，理解 Compiler 和 Compilation 的概念，以及Webpack的构建流程，对于进行高效的代码优化和问题排查至关重要。
评论0