一 什么是前端工程化
能让前端高效开发项目的一套体系结构。这套体系从项目初始化文件开始，经过开发、构建、部署，通过合理的利用工具和规范，从零到一落地一个项目。
二 工程化体系划分
主流项目从脚手架开始，脚手架一般会集成构建工具（如Create Vue、Create Vite、Vue CLI、Create React App），而构建工具又会集成提升开发效率的工具(如开发服务器)、测试的工具，以及提供部署产物并优化最终代码。
1.脚手架
脚手架的作用是：创建项目初始文件、集成构建工具并简化它们的配置项。
主流脚手架工具的介绍：
Create Vue：创建基于 vite 的vue项目
Create Vite：创建基于vite的vue或者react等项目
Vue CLI：创建基于 webpack 的vue项目【过时】
Create React App：创建基于 webpack 的react项目【过时】
2.构建
构建的作用是：提升开发效率（如开发服务器） + 测试 + 打包（把源代码转换成可执行代码） + 优化。
构建需要解决模块化开发、代码压缩、代码转换、增量更新和缓存、动态构建、资源定位等诸多问题，它属于工程化最繁琐、最复杂的部分。
构建的主要原因是：在浏览器端，开发时态和运行时态的侧重点不一样，而构建工具可以将开发时态的代码转化为运行时态的代码。ps：虽然浏览器支持ESM模块化标准，但依然还有很多问题存在，比如不支持CommonJS标准，导致很多第三方库无法使用。
从整体上我们可以把它分成模块化、工具链、构建工具三部分进行说明。
模块化介绍CommonJS和ES Module两种方式；
工具链介绍CSS预编译器、PostCSS、TypeScript、Babel和ESlint五种工具；
构建工具介绍webpack。
（1）模块化
CommonJS：面向浏览器之外的模块化规范。
ES Module：规范的静态模块体系，在最新版的nodeJS中，可以完全取代CommonJS。
（2）工具链
CSS预编译器：提供便捷的语法和特性供开发者编写源代码，经过专门的编译工具将源码转化成css语法。
PostCSS：将浏览器未实现的未来的CSS规范转化为当前可运行的语法。
TypeScript：提供严谨的语法供开发者编写源代码，避免JavaScript的怪异行为，最后TypeScript会被编译为普通的JavaScript代码。
Babel：将浏览器未实现的ECMAScrip规范语法转化为可运行的低版本语法。
ESlint：是一个 JS/TS 代码规范和错误检查工具。
（3）构建工具
webpack：一个用于现代 JavaScript 应用程序的静态模块打包工具。
3.部署
前端工程一般只用考虑提供部署产物，具体部署流程会由专业运维人员处理，而提供部署产物是构建工具内置的主要功能。
三 总结
总之，前端工程化是一张蓝图，前端工程体系是一种服务，以项目迭代过程中的前端开发为主要服务对象，涉及开发、构建、部署等环节。
类比到建筑，一栋房子需要几个卧室、几间卫生间以及各房间的排序和面积等属于需求设计；按照需求设计合理的地基处理、墙体结构等细节属于架构设计；保证工人们能够快速、安全、严格地按照架构图进行建设则属于工程化设计。
