工程化概览
前端工程化指用工具与规范把「能跑的代码」变成「可协作、可构建、可部署、可维护」的项目：包管理、构建打包、代码质量、Git 工作流与环境配置。本目录与 Vue 工程化、React 工程化 等框架章节互补——此处侧重构建工具与仓库规范。
构建工具选型（2024+）
| 场景 | 建议 |
|---|---|
| 新项目（Vue / React / 原生 TS） | Vite |
| 维护既有 Webpack 配置、复杂自定义插件 | 继续 Webpack 5 |
| 微前端、Rspack 生态 | 按团队已选方案（如 Rsbuild） |
事实澄清（避免常见误解）：
- Vite 开发：原生 ESM + 按需编译；依赖预构建用 esbuild。
- Vite 生产
vite build：由 Rollup 打包（非 esbuild 产出最终 bundle）。见 Vite 生产构建。 - Webpack：开发与生产均走完整依赖图与 bundle 流程。见 Webpack 工作原理。
本目录结构
推荐学习顺序
参考文献
以下链接在编写时均可正常访问：
| 资料 | 说明 |
|---|---|
| Vite 文档 | 中文官方 |
| Webpack 文档 | 英文官方 |
| Node.js 文档 | 运行时 |
相关文章
其他配置
除 ESLint、Prettier 等规范文件外，仓库中常见的工具链与包管理配置如下。见 工程化概览。
工作原理
Webpack 是静态模块打包器：从入口递归解析依赖，经 Loader 转换后输出一个或多个 bundle。与 Vite 对比见 Webpack 与 Vite。
部署实践
Vite 项目的 CI/CD、多环境、CDN、Legacy 与体积预算等工程化要点。环境变量见 env；构建见 生产构建。
产物优化
Webpack 通过代码分割、Tree Shaking、压缩与资源模块等减少体积、改善缓存。原理背景见 工作原理。
企业级实践
大型前端项目在 Webpack 场景下的多环境拆分、Docker 构建缓存、自定义 CLI 与微前端（Module Federation / single-spa）等实践。入门见 工程化概览。
ESLint
ESLint 是可配置的 JavaScript/TypeScript 静态检查工具，用于发现语法问题、不良实践与部分风格问题。格式化交给 Prettier。见 工程化概览。
Series
project
3 / 25