Webpack是基于依赖图的静态打包器，Vite是基于原生ESM的按需服务型构建工具；前者启动时全量构建依赖图并输出打包文件，后者开发时按需转换模块、冷启动快且HMR精准。
JavaScript 代码打包，本质是把分散的模块（比如 import 进来的文件、第三方库、样式、图片等）按依赖关系组织起来，合并、转换、优化，最终生成浏览器能直接运行的静态资源。Webpack 和 Vite 都是构建工具，但设计思路和运行机制差异很大。
Webpack：基于依赖图的静态打包器
Webpack 启动时会从你配置的入口文件（如 src/index.js）开始，递归解析所有 import、require、import() 等语句，构建出一张完整的模块依赖图。每个模块都可能被不同的 loader 处理（比如用 babel-loader 转译 ES6+，用 css-loader 处理 CSS），再由 plugin 在构建生命周期中干预（如提取 CSS、压缩代码、注入环境变量）。
关键特点：
- 打包结果是若干个“输出文件”（如
main.js、vendor.js、styles.css），默认包含运行时（runtime）和模块加载逻辑 - 开发时启动一个 dev server，先全量打包，再监听文件变化做增量编译（热更新 HMR 也需额外配置 loader/plugin 支持）
- 对 CommonJS、AMD、ESM 兼容性好，生态插件极其丰富，适合复杂、定制化强的老项目
Vite：基于原生 ESM 的按需服务型构建工具
Vite 不在启动时打包整个应用，而是利用现代浏览器原生支持 import（ESM）的特性，在开发阶段直接以模块方式提供源码——请求哪个文件，就实时转换并返回哪个文件（比如把 .vue 文件转成 JS，把 import xxx from 'lodash' 重写为指向 node_modules/.vite/deps/lodash.js）。它背后有 esbuild（快）做依赖预构建，有 Rollup（准）做生产打包。
立即学习“Java免费学习笔记（深入）”；
关键特点：
- 开发服务器冷启动极快（毫秒级），因为不解析/打包源码，只预构建
node_modules中的依赖 - HMR 精准且迅速，修改一个组件，只更新该模块及其引用链，不刷新页面
- 生产构建默认用 Rollup，输出更小、更标准的静态资源；配置简洁，约定优于配置
它们怎么处理 import 和第三方库？
Webpack 把所有 import 当作构建时的静态分析目标，连 import.meta.env 都会被替换为实际值；而 Vite 在开发中保留 import 语义，靠浏览器加载，只对无法直接执行的内容（如 JSX、Vue SFC、CSS）做即时转换。对于 node_modules 中的包，Webpack 默认全部走 loader 处理，Vite 则区分对待：纯 ESM 包直接转发，非 ESM 或含构建逻辑的包（如 lodash-es）会由 esbuild 预构建为 ESM 格式缓存。
选哪个？看场景
新项目、追求开发体验和现代语法，优先选 Vite；已有大型 Webpack 项目、需要深度定制 loader/plugin、或必须兼容老旧构建流程，继续用 Webpack 更稳妥。两者不是替代关系，而是不同年代技术约束下的解法——Webpack 解决的是“浏览器不支持模块”的问题，Vite 解决的是“打包太慢”的问题。
