【吃透前端工程化，大厂级实战项目以战带练】

工程化不是只会配 Webpack，而是懂全链路提效

很多学习者对前端工程化的认知还停留在“配置 Webpack 插件”或“使用 CLI 脚手架”的层面，但这恰恰是面试中容易被挑战的盲点。这门课解决的核心问题，是帮你建立从项目创建、开发、构建到发布的完整工程化视野。它强调工程化不仅是工具链的堆砌，更是团队协作与项目维护的规范化方案。对于基础较薄弱的同学，如果连 npm scripts、模块打包的基本原理都未梳理清楚，建议先从第 02 章的企业场景分析切入，理解为什么要工程化；若你已有 Vue/React 开发经验但从未深入构建流程，可直接进入第 03 章的原生项目改造实战，通过亲手将一个裸 js 项目逐步规范化，感受工程化带来的可维护性提升。

三个实战项目层层递进，补齐源码级理解缺口

课程内容并未止步于工具使用，而是通过三个由浅入深的大厂级实战项目，带你走完工程化改造的全流程。前两个项目聚焦原生 JS 与 Vue 项目的架构升级与性能优化，涵盖 HMR 原理、Vue2 到 Vue3 的迁移策略以及 Webpack5 的核心配置升级。这部分内容适合需要查漏补缺的同学，尤其是准备面试中“构建优化”题目的学习者，第 09 至 12 章的源码解析与实战升级将直接回应这些高频考点。进阶阶段则进入脚手架自研领域，第 13 至 18 章带你从零搭建属于自己的工程化脚手架，涵盖 build 与 dev 模块的实现，这是区分“使用者”与“设计者”的关键能力。此外，课程还补充了 Vite 的快速上手与性能深度解析，帮助你掌握现代构建工具的核心差异。

学完能独立设计组件库脚手架，配套资料用于动手验证

完成本课程后，你应该能够独立设计并实现一个基础的前端工程化脚手架，具备对复杂项目构建流程的分析、优化与重构能力，并能清晰阐述 Webpack、Vite 等工具的原理与选型依据。资料包中的项目源码是你练习的核心资源，建议不要直接拷贝最终代码，而是跟随课程节奏，在对应章节暂停并按需查阅源码，对比自己的改造思路与讲师方案的差异。对于脚手架实战部分，可重点对照 build 和 dev 模块的实现细节，验证自己编写的脚本是否覆盖了常见的编译、热更新与发布场景。通过这种“看原理—做改造—验结果”的闭环练习，才能真正将工程化知识内化为可复用的技术能力。