Webpack（Webpack）MOC
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。本知识体系从零开始，循序渐进地教你掌握 Webpack，最终能够独立搭建和优化项目。
学习路径：学习 Webpack 前需要掌握 JavaScript 基础 和 模块化 概念。Webpack 与 工程化实践 和 性能优化 密切相关。
🎯 学习目标
完成本知识体系学习后，你将能够：
- ✅ 理解 Webpack 的核心概念和工作原理
- ✅ 从零开始搭建 Webpack 项目
- ✅ 配置开发环境和生产环境
- ✅ 使用 Loader 和 Plugin 处理各种资源
- ✅ 优化构建速度和打包体积
- ✅ 解决常见的构建问题
- ✅ 搭建 React、Vue 等框架项目
📚 知识体系（按学习顺序）
阶段一：快速入门（必学）
目标：快速上手，搭建第一个 Webpack 项目
-
快速开始 ⭐
- 什么是 Webpack
- 安装和第一个项目
- 基础配置和运行
- 第一个打包结果
-
核心概念 ⭐
- Entry（入口）
- Output（输出）
- Loader（加载器）
- Plugin（插件）
- Mode（模式）
阶段二：基础配置（必学）
目标：掌握 Webpack 的基础配置能力
-
- 完整配置结构
- Entry 配置详解
- Output 配置详解
- Resolve 配置（路径解析）
- 环境变量配置
-
- Loader 工作原理
- 常用 Loader（Babel、CSS、图片等）
- Loader 执行顺序
- 自定义 Loader
- Loader 最佳实践
-
- Plugin 工作原理
- 常用 Plugin（HtmlWebpackPlugin、CleanWebpackPlugin 等）
- 自定义 Plugin
- Plugin 生命周期钩子
- Plugin 最佳实践
阶段三：开发环境（必学）
目标：配置高效的开发环境
- 开发环境配置
- Webpack DevServer
- 热模块替换（HMR）
- Source Map 配置
- 代理配置
- 开发环境优化
阶段四：生产环境（必学）
目标：优化生产环境构建
-
- 代码压缩
- Tree Shaking
- 作用域提升
- 资源优化
- 生产环境最佳实践
-
- 为什么需要代码分割
- Entry 分割
- SplitChunks 配置
- 动态导入（Dynamic Import）
- 懒加载和预加载
阶段五：性能优化（进阶）
目标：提升构建速度和运行时性能
- 性能优化
- 构建速度优化
- 缓存策略
- 多进程构建
- DllPlugin 使用
- 运行时性能优化
阶段六：实战项目（必学）
目标：完成真实项目的搭建
-
- 项目初始化
- TypeScript 配置
- React 配置
- 开发/生产环境分离
- 完整配置示例
-
- 项目初始化
- Vue Loader 配置
- Vue 3 项目配置
- 完整配置示例
-
- MPA 项目结构
- 多入口配置
- 动态生成配置
- 代码分割策略
阶段七：问题排查与最佳实践（参考）
目标：解决实际问题，掌握最佳实践
🛠️ 快速查找
按场景查找
- 新手入门：快速开始 → 核心概念
- 配置项目：基础配置详解 → Loader 详解 → Plugin 详解
- 搭建 React：实战项目：从零搭建 React 项目
- 搭建 Vue：实战项目：从零搭建 Vue 项目
- 优化性能：性能优化 → 代码分割
- 解决问题：常见问题排查
按工具查找
📖 学习建议
学习路径
-
初学者：
-
有基础者：
- 快速浏览 核心概念
- 直接学习 实战项目 或 实战项目：从零搭建 Vue 项目
- 遇到问题查阅 常见问题排查
-
进阶学习：
实践建议
- 边学边做：每学一个知识点，立即动手实践
- 从简单到复杂：先搭建简单项目，再逐步增加功能
- 遇到问题先思考：查看错误信息，查阅文档，再寻求帮助
- 多做项目：通过实际项目加深理解
🔗 相关资源
官方资源
相关知识点
📝 更新日志
- 2025-01：创建 Webpack 知识体系，拆分为详细的学习路径