2-1 技术栈选择如今如何来学习Webpack？从应用场景出发
Webpack 的现状
如今大多数新项目不会直接使用 Webpack——Vue 有 Vite 驱动的 create-vue 脚手架，React 有 Next.js 等框架。Vue CLI 已进入维护模式（maintenance mode），官方推荐使用基于 Vite 的 create-vue 创建新项目。
但大量存量项目仍使用 Webpack 打包构建，这些项目需要维护和升级，因此读懂 Webpack 配置文件仍然是必备能力。
逆向思维选择工具
选择构建工具的正确方式不是"先选工具再适配项目"，而是"先确定应用场景再推导工具"：
传统思路：工具 → 场景 → 应用（可能工具不适合）
逆向思路：应用 → 场景 → 工具（精准匹配）
text
场景一：Web 应用开发
Vue/React 项目 + 组件库 + 管理后台 + 桌面端（Electron） → 直接使用 Vite
原因：开发体验好、构建快、生态兼容 Vue/React、底层使用 Rollup 打包稳定可靠。
场景二：Node.js 库开发
Node.js + TypeScript 库打包 → 选择 tsx（开发调试）+ Rollup/Vite（打包构建）
关键考量：是否需要支持下一代 TS 文件后缀、是否需要实时调试、模块数量对性能的要求。
场景三：旧项目升级
- Webpack 4 → Vite：工具生态较丰富，升级方便
- Webpack 4 → Webpack 5：官方提供 Migration Guide
- Webpack 3 及更早：建议不要动，放入 Docker 作为独立模块，新项目通过接口调用
学习 Webpack 的两个核心
| 阶段 | 内容 | 说明 |
|---|---|---|
| 第一阶段 | 读懂基础配置 + 理解核心概念 | Entry、Output、Loader、Plugin、Mode |
| 第二阶段 | 理解打包原理 | tapable、Loader 执行流程、Plugin 钩子机制 |
核心概念从 Webpack 4 到 Webpack 5 乃至后续版本都不会发生根本性变化。掌握了这些基础后再扩展学习 DevTools、DevServer、缓存等进阶内容会事半功倍。
↑