前端工程化的目的

前端工程化的核心目的是为了应对现代前端应用日益增长的复杂度和团队协作需求。它通过将开发、测试、构建、部署等环节标准化、工具化和自动化，最终达到以下三个目标：

1. 提升开发效率和质量：使用框架、组件库、预处理器等，避免重复造轮子；集成代码规范、语法检查、单元测试等，保障代码质量和可维护性
2. 优化项目性能与体验：利用构建工具进行代码压缩、拆分、摇树等优化，减少资源体积，提升网站加载速度和运行性能
3. 保障团队协作与可持续性：统一的技术栈、开发规范和自动化流程（如CI/CD），使得多人协作更顺畅，项目迭代更可靠

简单来说，前端工程化就是把软件开发的最佳实践融入到前端开发中，让开发更高效、应用更健壮、团队协作更轻松

模块化

标准

CommonJS(CJS) –> 社区 运行时 require(‘…’)

Ecmascript Module(ESM) –> 官方 编译时 import ”…” from ” “

实现

浏览器 –> ESM

Node –> ESM CJS

构建工具 –> webpack rollup

包管理

包 : package 一系列模块的集合

npm (包的属性,registry,command-line interface(cli))

JS工具链

CSS工具链

构建工具和脚手架 webpack

webpack极简原理图

1.入口

…………