请对比 Webpack 与 Vite 这两种前端构建工具，说明它们的主要差异，并分别阐述各自的优势与不足。
考察说明
考查对前端构建工具演进的理解，以及对 Webpack 和 Vite 核心原理与适用场景的掌握。
回答思路
- 【回答框架 1】Webpack 是一个基于 Node.js 的模块打包器，通过入口文件递归分析依赖，生成依赖图，并将各种资源（JS、CSS、图片等）作为模块打包成静态资源。Vite 则利用浏览器原生 ES Module 支持，在开发环境按需加载模块，无需预先打包，因此启动速度极快。
- 【回答框架 2】开发体验方面，Vite 利用 esbuild 预构建依赖和原生 ESM，实现毫秒级的热更新（HMR），而 Webpack 开发模式需要打包，启动和热更新速度较慢，尤其是大型项目。但 Webpack 生态更成熟，插件众多，配置灵活，兼容性更好。
- 【回答框架 3】生产构建上，Vite 默认使用 Rollup 进行打包，产物优化较好，但对于极复杂的构建需求，Webpack 的成熟方案和社区经验可能更有优势。Vite 官方推荐用于新项目，尤其是 Vue 3 项目，而 Webpack 在旧项目迁移和需要细粒度控制的场景仍然常用。
- 【回答框架 4】两者核心差异是打包机制：Webpack 在启动时构建整个依赖图，Vite 则按需编译。Vite 借助浏览器原生 ESM，开发时无需打包，但生产环境仍要打包。Webpack 更通用，支持多种模块系统，但配置复杂度高；Vite 配置更简洁，开箱即用，但对复杂老项目的适配可能有限。
- 【关键点 1】Webpack 基于 Node.js 模块打包，Vite 基于原生 ESM 按需加载。
- 【关键点 2】Vite 开发服务器启动快、HMR 快，Webpack 在大型项目上构建慢。
- 【关键点 3】Vite 生产构建使用 Rollup，Webpack 生态更成熟、插件更丰富。
- 【关键点 4】Vite 配置简单、开箱即用，Webpack 配置灵活但复杂。
- 【关键点 5】实际选型需考虑项目规模、团队熟悉度和生态需求。