前端工程化与工具链

本目录涵盖前端工程化的核心内容，包括构建工具、包管理器、代码检查、转译工具等。

目录结构

构建工具（Build Tools）

• Webpack 详解 - 配置、构建流程、性能优化
• Vite 核心概念 - 为什么快、核心特性、配置示例

模块系统（Module Systems）

• 模块规范与系统 - CommonJS、ES Modules、循环引用、动态导入

包管理器（Package Managers）

• 包管理器对比 - npm、yarn、pnpm 的原理与使用
• Monorepo 架构 - Monorepo 概念、工具选型、最佳实践

代码质量（Code Quality）

• ESLint 代码检查 - ESLint 原理、配置、自定义规则
• Babel 转译 - Babel 工作原理、配置、Polyfill 策略

样式工程化（CSS Engineering）

• CSS 工程化 - 预处理器、PostCSS、CSS Modules、CSS-in-JS

测试工具（Testing）

• 前端测试工具 - 测试框架、工具链、最佳实践
• Jest、Vitest、Mocha 等单元测试框架
• React Testing Library、Vue Test Utils 组件测试
• Cypress、Playwright、Puppeteer E2E 测试
• 测试最佳实践与 CI/CD 集成

外部资源（Resources）

• 工具链资源汇总 - 官方文档、学习教程、工具插件

学习路径

入门路径

1. 基础概念
2. 了解前端工程化的必要性
3. 学习模块化规范（CommonJS、ES Modules）

4. 理解包管理器的作用

5. 包管理器

6. 掌握 npm 基本使用
7. 了解 package.json 配置

8. 学习依赖管理策略

9. 构建工具

10. 学习 Webpack 基础配置
11. 掌握常用 Loader 和 Plugin

12. 了解 Vite 的优势

13. 代码质量

14. 配置 ESLint 规则
15. 理解 Babel 转译流程
16. 集成代码检查到工作流

进阶路径

1. 性能优化
2. Webpack 打包优化
3. 代码分割策略
4. Tree Shaking 原理

5. 构建速度优化

6. 架构设计

7. Monorepo 架构设计
8. 微前端工程化

9. 组件库构建

10. 自定义工具

11. 编写 Webpack 插件
12. 编写 Babel 插件

13. 编写 ESLint 规则

14. 工程化最佳实践

15. CI/CD 集成
16. Git Hooks 配置
17. 自动化测试
18. 代码规范统一

核心主题索引

Webpack 相关

主题	文档	说明
Webpack 配置	webpack.md	entry、output、module、plugins 等
Loader 与 Plugin	webpack.md	常用 Loader 和 Plugin 介绍
构建流程	webpack.md	7 个阶段详解
热更新 HMR	webpack.md	热更新原理与配置
Code Splitting	webpack.md	代码分割策略
Tree Shaking	webpack.md	Tree Shaking 原理
性能优化	webpack.md	提高打包速度、减小体积

Vite 相关

主题	文档	说明
Vite vs Webpack	vite.md	为什么 Vite 更快
ES Modules	vite.md	浏览器原生 ESM 支持
预构建依赖	vite.md	esbuild 预构建
Vite 配置	vite.md	基本配置示例
迁移指南	vite.md	从 Webpack 迁移

Monorepo 相关

主题	文档	说明
Monorepo 概念	monorepo.md	什么是 Monorepo
优劣对比	monorepo.md	Monorepo vs MultiRepo
工具选型	monorepo.md	Lerna、Turborepo、Nx、Rush
最佳实践	monorepo.md	目录结构、依赖管理等

模块系统相关

主题	文档	说明
CommonJS 规范	module-systems.md	module.exports、require
ES Modules	module-systems.md	import/export、差异对比
循环引用	module-systems.md	CommonJS vs ESM 处理方式
动态导入	module-systems.md	动态 import 语法

包管理器相关

主题	文档	说明
Pnpm 原理	package-managers.md	为什么 Pnpm 快
npm install	package-managers.md	npm install 流程
npm run	package-managers.md	npm run 执行过程
版本管理	package-managers.md	语义化版本、lock 文件

ESLint 相关

主题	文档	说明
ESLint 原理	linting.md	AST、规则检查、Fix
ESLint 配置	linting.md	配置文件、规则说明
自定义规则	linting.md	编写自定义规则
与 Prettier 集成	linting.md	ESLint + Prettier

Babel 相关

主题	文档	说明
Babel 原理	babel.md	解析、转换、生成
Babel 配置	babel.md	presets、plugins 配置
Polyfill 策略	babel.md	core-js、transform-runtime
最佳实践	babel.md	性能优化、配置技巧

CSS 工程化相关

主题	文档	说明
预处理器	css-engineering.md	Sass、Less、Stylus
PostCSS	css-engineering.md	PostCSS 原理与插件
CSS Modules	css-engineering.md	CSS 模块化方案
CSS-in-JS	css-engineering.md	styled-components、Emotion
原子化 CSS	css-engineering.md	Tailwind CSS、UnoCSS

面试高频问题速查

Webpack

• Webpack 配置有哪些？
• 常见的 Loader 和 Plugin？
• Loader 和 Plugin 的区别？
• Webpack 的构建流程？
• 什么是 HMR？原理是什么？
• 什么是 Code Splitting？
• 什么是 Source Map？
• Tree Shaking 原理？
• 如何提高 Webpack 打包速度？
• 如何减少打包后的代码体积？

Vite

• Vite 比 Webpack 快在哪里？

模块系统

• CommonJS 和 ES Module 的区别？
• 循环依赖如何处理？
• 为什么 ES Module 可以做 Tree Shaking？

Monorepo

• 什么是 Monorepo？
• Monorepo 优劣？
• 如何在项目中实践 Monorepo？

包管理器

• 为什么 Pnpm 比 Npm 快？
• npm install 的执行过程？
• npm run start 的整个过程？

ESLint

• ESLint 概念及原理？

Babel

• Babel 概念及原理？

CSS 工程化

• 对 CSS 工程化的理解？

延伸阅读

相关内部文档

• 前端架构总览 - 前端技术架构设计
• 性能优化 - 前端性能优化策略
• 框架对比 - React、Vue、Angular 对比
• 前端安全 - XSS、CSRF、CSP 等安全主题

外部资源

更多学习资源请查看 工具链资源汇总，包含：

• 官方文档（Webpack、Vite、Babel、ESLint 等）
• 学习教程与博客文章
• 工具与插件推荐
• 开源项目参考

---

维护说明： 本文档作为前端工程化的索引页，应随着内容的增减及时更新导航链接。