前端工程化是指通过标准化工具、规范化流程与行业最佳实践，系统性提升前端开发效率、代码可维护性、项目可扩展性与整体交付质量的工程解决方案。它覆盖自动化构建、模块化开发、代码规范校验、性能优化、版本控制、依赖治理等多个核心环节。借助 Webpack、Vite、npm 等工程化工具，可实现资源统一管理、打包压缩优化，同时提供高效开发服务器、热重载能力，简化项目依赖管理，让开发者摆脱大量手动操作与重复劳动，更专注于核心业务逻辑开发。
Webpack 是一款主流的现代前端模块打包工具，主要用于整合、构建与打包 Web 应用中的 JavaScript、CSS、图片、字体等各类静态资源。它以模块化思想为核心，兼容 CommonJS、ES Module 等多种模块化规范，支持模块按需加载，有效提升应用运行性能与团队协作开发效率
Entry：指定 Webpack 开始构建的入口文件，作为打包依赖梳理的起始点，支持单入口与多入口配置，可分别适配单页应用与多页应用场景。
Output：定义 Webpack 打包完成后资源的输出目录、文件名规则，同时可配置 publicPath 适配 CDN 部署与资源访问路径。
Loader：用于让 Webpack 处理非 JavaScript 类型文件，将其转换为可通过 import 引入的有效模块；常用 Loader 包含 babel-loader、css-loader、file-loader、url-loader 等。
Plugin：用于实现更丰富的扩展功能，覆盖代码压缩、HTML 文件生成、文件拷贝、环境变量注入、目录清理等场景；常用插件有 HtmlWebpackPlugin、TerserWebpackPlugin、CleanWebpackPlugin 等。
Mode：可设置为 development 或 production 两种模式，Webpack 会根据模式自动启用对应优化策略，生产模式默认开启代码压缩、Tree Shaking、作用域提升等优化。
DevServer：提供本地开发服务器，支持热模块替换 HMR、自动页面刷新、接口代理等能力，显著提升开发调试体验。
代码分离：将项目代码拆分为多个独立文件，实现按需加载与公共代码抽离，有效减小应用初始加载体积，提升首屏加载速度。
Vite 是一款面向现代浏览器的轻量化前端构建工具，主打极速开发体验与高效生产构建，解决了传统打包工具在大型项目中启动慢、热更新延迟的痛点
快速开发服务器：内置高性能开发服务，启动速度远快于传统打包工具，大幅缩短开发等待时间。
ES 模块原生支持：依托浏览器对 ES 模块的原生解析能力，实现极速冷启动与热模块替换 HMR，开发过程响应灵敏且内存占用更低。
按需编译：采用即时编译机制，仅对当前访问的模块进行编译处理，避免全量编译带来的性能损耗，大型项目中优势尤为明显。
插件系统：兼容 Rollup 插件生态，同时支持 Vue 专用插件与自定义插件，扩展能力灵活强大，可满足各类项目定制化需求。
多框架支持：虽最初为 Vue.js 设计，但现已原生支持 React、Preact、SolidJS 等主流框架，具备优秀的框架无关性。
开箱即用 TS：无需额外繁琐配置，原生支持 TypeScript 语法，可直接在项目中使用 TS 进行业务开发。
依赖预构建：启动时自动对第三方依赖进行预打包，将 CommonJS 规范依赖转换为 ES 模块，进一步提升模块加载速度。
生产构建优化：生产环境基于 Rollup 进行打包，内置代码分割、静态资源压缩、懒加载等优化策略，保障线上应用性能。
