开始阅读
webpack 是一个庞大且复杂的系统，其代码文件之多，数量之多，甚至超过了 react 和 vue 这样的框架。对于初学者而言，阅读 webpack 代码最大的阻碍就是 从哪里开始入手？ 以及 怎么入手？ 的问题。让本系列的文章中，将探讨这样的问题，并尽可能深入的使知识的脉络更加清晰。
# 前提
- 了解 webpack 宏观上的核心原理和概念。建议先阅读【参考】中的资料。实际上阅读完上述的内容而言在一定程度上已经够用了。而本系列也不会在重复上述文章的内容，而是参考这样的脉络以不同的注入点从源码进行深入和扩展。
- 先阅读 tapable 部分了解其 hook 结构的概念。
# V5 VS V4
# 整体方向
- 尝试用
持久性缓存来提高构建性能。 - 尝试用更好的
算法和默认值来改进长期缓存。 - 尝试用更好的
Tree Shaking和代码生成来改善包大小。 - 尝试改善与网络平台的兼容性。
- 尝试在不引入任何破坏性变化的情况下，清理那些在实现 v4 功能时处于奇怪状态的内部结构。
- 试图通过现在引入突破性的变化来为未来的功能做准备，使其能够尽可能长时间地保持在 v5 版本上。
# 重大变更
- 不再为 Node.js 模块 自动引用 Polyfills，提高 web 平台的兼容性。
- 确定的 Chunk、模块 ID 和导出名称
- 真正的内容哈希
- 命名代码块 ID
- 模块联邦
- JSON 模块
- import.meta
- 资源模块
- 原生 Worker 支持
- URIs
- 异步模块
- 外部资源
- 经过优化的构建目标 (target)
- Stats
- 进度
- 自动添加唯一命名
- 自动添加公共路径
- Typescript 类型
- 嵌套的 tree-shaking
- 内部模块 tree-shaking
- CommonJs Tree Shaking
- 副作用分析
- 每个运行时的优化
- 模块合并
- 通用 Tree Shaking 改进
- 开发与生产的一致性问题
- 改进代码生成
- 改进 target 配置
- 代码块拆分与模块大小
- 持久缓存
- 编译器闲置和关闭
- 文件生成
- 单一文件目标的代码分割
- 更新了解析器
- 没有 JS 的代码块
- 实验特性
- 最小 Node.js 版本
# 重大内部变更
- 新的插件运行顺序：插件在应用配置默认值 之前 就会被应用
- 运行时模块
- 序列化：对复杂对象进行序列化
- 用于缓存的插件
- 冻结钩子对象
- Tapable 插件升级
- Stage 钩子
- Main/Chunk/ModuleTemplate 废弃：JavascriptModulesPlugin 负责 JS 模板
- 入口文件描述符
- 排序与 ID：顺序将不再用于 ID 的生成，ID 生成的完全控制在插件中
- 模块热替换
- 工作队列
- Logging
- 模块和 chunk 图
- Init Fragments
- 模块 Source Types
- Stats 的插件
- 全新的监听
- SizeOnlySource after emit
- ExportsInfo
- 代码生成阶段
参考：
# 模块
webpack 是个复杂的系统，本系列将 webpack 分成如下几个模块来进行解读：
- 构建流程：分成 init 阶段、make 阶段、seal 阶段、emit 阶段四个部分，分成四个章节进行探讨。loader 系统和插件系统的原理将穿插在本章节讲解。
- loader 系统：探究 webpack loader 系统，讨论常见资源文件时如何被 loader 解析为 JavaScript 的。
- plugin 系统：探讨 webpack 的插件系统，讨论内置插件、核心插件的实现原理。
# 构建流程
- init 阶段
- make 阶段
- seal 阶段
- emit 阶段
# RoadMap
参考：Webpack 5 知识体系 - GitMind (opens new window)
如果上述文件无法访问请参考：
# 构建流程 RoadMap
版权声明
以上 RoadMap、构建流程 RoadMap 为原作者为 范文杰 ，请访问原作：分享一份 Webpack 知识图谱 (opens new window)
# 衍生内容
- 由 Parse 过程衍生的
源码字符串如何生成 AST？AST 如何生成目标产物？问题将在 acorn 源码解析、Babel 源码解析、编译原理中探讨。 - 关于 webpack 源码中设计模式的应用在 Webpack 中的设计模式探讨 中探讨。
# 声明
- 由于 webpack 源码量巨大，本文将从简引用代码。
# 参考阅读
- [万字总结] 一文吃透 Webpack 核心原理 - 知乎 (opens new window)
- diving-into-webpack/README.md at master · lihongxun945/diving-into-webpack (opens new window)
- Webpack 案例 —— vue-loader 原理分析 - 掘金 (opens new window)
# 链接
编辑 (opens new window)
上次更新: 2022/09/06, 14:25:16