webpack 5 whats new

• 语言: 英语
• 格式: .pdf
• 来源: github.com/sokra

摘要

Webpack 5引入了多项重大改进，包括持久化缓存机制（通过设置缓存类型为'filesystem'实现），新的插件系统（提供HOOKS和PRESETS），模块管理优化（使用Set替代Array），支持TAPABLE 2和TypeScript typings，以及提升对Node.js版本要求至8.9.0。文档还展示了Webpack 5在运行时模块隐藏、依赖加载、变更检测等方面的改进。

AI总结

### Webpack 5 新功能总结

#### 组织架构调整
- **Webpack 核心升级**：Webpack 5 成为 `webpack/webpack` 的主要版本（MAJOR VERSION 5）。
- **独立开发**：其他仓库（如 loaders、plugins）单独维护，独立版本控制。
- **开发状态**：基于 `webpack/webpack#next` 分支，包含约 1000 个提交和 500 个 PR。

#### 新增功能
1. **新插件**：
- `new IgnorePlugin({ resourceRegExp: /some-regexp/ })`：用于忽略特定资源。
- `new BannerPlugin({ banner: "Some banner" })`：在文件顶部添加自定义 banner。

2. **持久化缓存**：
- **Webpack 4**：仅支持内存缓存，重启后缓存丢失。
- **Webpack 5**：新增 `cache: { type: "filesystem" }` 实验性持久化缓存，减少重启时间。

3. **改进的监控功能**：
- 支持更多文件扩展（如 `.ts` 和 `.js`）。
- 提高对文件变化的检测能力。

#### 兼容性与性能优化
1. **Node.js 版本要求**：
- **Webpack 4**：`>=6.11.5`。
- **Webpack 5**：`>=8.9.0`。

2. **模块存储结构优化**：
- **Webpack 4**：使用数组存储模块、chunks 和文件。
- **Webpack 5**：改用集合（`Set`），提升性能并兼容旧代码。

3. **缓存接口改进**：
- **Webpack 4**：`compilation.cache = {}`。
- **Webpack 5**：引入 `Cache` 类，支持更多钩子（`get`、`store`、`beginIdle` 等）。

#### 开发者工具
1. **统计信息增强**：
- **Webpack 4**：插件功能有限。
- **Webpack 5**：新增钩子、预设、JSON 和文本格式输出，提供更多调试信息。

2. **模块运行时优化**：
- **Webpack 5**：支持 `runtime: false` 和 `chunkRelations: false`，隐藏运行时模块和依赖关系。

#### 总结
Webpack 5 在性能、缓存、插件和开发者工具方面进行了重大改进，支持更高效的开发和构建流程，同时对 Node.js 版本和模块结构提出了新要求。