外观
Vite 和 Webpack 差在哪？
开发环境里，Vite 把源码以浏览器原生 ES 模块的形式按需编译，所以冷启动不必先打完整个包。Webpack 从入口出发建完整的依赖图，开发和生产都走打包。生产环境 Vite 用 Rollup 打包，产物形态和 Webpack 一样要面对分包、缓存和兼容。
原理
Vite 开发服务器收到一个模块请求，才用 esbuild 转换这一个文件（TypeScript、JSX）并返回。依赖（node_modules）会预先用 esbuild 打成少量 ESM，因为依赖里常有 CommonJS，也不值得每次都转换。改一个文件时，HMR 只让浏览器重新请求受影响的模块。
Webpack 用 loader 转换文件，用 plugin 参与编译的各个钩子。入口、loader、代码分割都写在一份配置里。开发时也维护一份打包结果，HMR 把变更的模块替换进那份结果。项目很大时，这份依赖图的构建就是启动时间的来源。持久缓存和更快的实现（例如 Rspack）是在这套模型上加速。
生产构建两边都要做：合并模块、tree shaking、压缩、把内容哈希写进文件名。Vite 的生产配置很多来自 Rollup 插件；Webpack 则继续用自己的 plugin。迁移的成本主要在这些插件，不在 import 语法。
新项目默认可以用 Vite：开发反馈快，Vue 和 React 都有官方模板。已经跑得很稳的 Webpack 构建，只有在启动或热更新已经成为日常负担时才值得迁。
追问
为什么 Vite 开发很快，生产还是要等？
开发时浏览器自己加载上百个小模块，换取的是服务器不用先打包。生产不能对用户发几百个未压缩的开发模块，所以仍然用 Rollup 做完整构建。
esbuild 为什么不直接拿来做生产打包？
Vite 用它做依赖预构建和语法转换，是因为快。生产分包、CSS 代码分割和一部分插件生态仍然走 Rollup。这是速度和打包能力的分工，不是两个工具互相替代。
易错点
- 「用了 Vite 就不需要打包」只对开发服务器成立。
- 开发时能跑，不代表生产的分包和
sideEffects配置是对的。上线前要看生产构建。 - 把 Webpack 的每个 loader 都找一个名字不同的 Vite 插件来翻译，不如先列真正用到的能力。