📦webpack

跟着AI学webpack

大纲

🧩 Webpack 渐进式实践项目清单

学习模式：每个项目解决一个具体问题，先动手实现 → 再理解原理 → 最后举一反三

1. 手动配置第一个 Webpack 项目（零 CLI 依赖）

2. 处理 CSS、图片等非 JS 资源

3. 配置 Babel 实现 ES6+ 转译

4. 搭建开发环境热更新（HMR）

5. 实现多页面应用（MPA）打包

6. 生产环境代码压缩与优化

7. CSS 提取与压缩独立文件

8. 代码分割（Code Splitting）实战

9. 长效缓存策略设计（contenthash）

10. Tree Shaking 深度优化

11. 编写自定义 Loader（如 Markdown 解析器）

12. 开发简易自定义 Plugin

13. 多环境配置分离（dev/test/prod）

14. 微前端模块联邦实战

15. 性能分析可视化（打包速度/体积）

16. 手写迷你 Webpack 核心（理解编译原理）

---

🎯 学习路线建议

新手阶段	推荐项目	目标
入门	1 → 2 → 3 → 4	掌握基础开发流
进阶	5 → 6 → 7 → 8 → 9	生产级优化能力
高手	10 → 11 → 12 → 13 → 14 → 15	工程化与定制能力
硬核	16	原理层掌握