Webpack是通用模块打包器，需手动配置loader/plugin构建bundle；Vite基于原生ESM按需编译，开箱即用、启动快、HMR精准，生产默认Rollup分包，二者核心思维与适用场景根本不同。
Webpack 和 Vite 的核心定位根本不同
Webpack 是一个通用的、高度可配置的模块打包器，它把所有资源（JS、CSS、图片等）都当作模块处理，通过 loader 和 plugin 构建依赖图并输出 bundle；Vite 则是基于开发阶段“按需编译 + 原生 ESM”的运行时方案，它不打包源码，而是靠浏览器原生 import 加载未构建的 .ts/.jsx 文件，只对生产环境做轻量 rollup 打包。
Vite 开箱即用，Webpack 几乎必须手动配
新建一个 Vite 项目后，vite 命令直接启动 dev server，支持 TS、JSX、CSS 预处理器、热更新，无需任何配置；而 Webpack 默认连 import 都不识别，必须手动装 webpack、webpack-cli、babel-loader 或 ts-loader、css-loader、style-loader 等，并在 webpack.config.js 中写清楚 entry、module.rules、plugins。
- 常见错误：用 Webpack 5 启动但忘了配
type: "module"或用了require()导致 ESM 报错 - Vite 的
vite.config.ts里改resolve.alias或加plugins就算“高级配置”，Webpack 里同功能要写 loader + plugin + resolve + optimization 多处 - Vue/React 项目中，Vite 通过官方插件（如
@vitejs/plugin-react）自动处理 HMR，Webpack 需额外配react-refresh-webpack-plugin并 patchbabel-loader
开发服务器启动速度和热更新机制差异极大
Webpack dev server 启动前必须先解析整个依赖图、转译、打包成内存中的 bundle，大型项目常卡在 “92% chunk asset optimization”；Vite dev server 启动几乎是瞬时的，因为不打包——首次访问某个页面时才按需转换对应文件（比如只转 src/App.tsx 和它的直接依赖），且 HMR 更新粒度精确到模块级，不会整页刷新。
- 性能影响：Webpack 的
cache.type = "filesystem"能缓解冷启动，但无法解决首次构建耗时；Vite 的缓存存在node_modules/.vite，重启后仍秒开 - 容易踩的坑：Webpack 里改了
alias但没清node_modules/.cache，导致路径解析还是旧的；Vite 改了define或env变量，必须手动vite --force强制重刷预构建依赖 - 兼容性注意：Vite 的 dev server 依赖原生 ESM，IE11 完全不支持；Webpack 可通过
target: "web"+browserslist输出兼容代码
生产构建目标和产物结构逻辑相反
Webpack 生产模式默认把所有 JS 合成一两个 bundle（main.js + vendor.js），靠 SplitChunksPlugin 手动拆；Vite 生产构建（vite build）默认用 Rollup，天然按入口和动态 import() 拆分 chunks，并自动生成 manifest.json 和 index.html 中的资源路径。
立即学习“Java免费学习笔记（深入）”；
- Webpack 里
optimization.splitChunks.chunks设为"all"才能拆 node_modules，Vite 默认就做 - Vite 的
build.rollupOptions.output.entryFileNames控制 JS 输出名，Webpack 对应的是output.filename和chunkFilename - 关键区别：Webpack 的
public/目录下静态资源会被原样拷贝到 dist，Vite 要求放public/才能免 hash 访问，且不能被 import；两者都支持，但 Webpack 需配CopyPlugin，Vite 自动处理
真正麻烦的不是“怎么配”，而是理解 Webpack 的 bundle 思维和 Vite 的 ESM on-demand 思维——前者适合需要深度控制打包过程的老项目或特殊构建流程，后者更适合现代前端开发节奏。别硬套 Webpack 配置习惯去改 Vite，也别指望 Vite 的 define 能替代 Webpack 的 DefinePlugin 全部行为。
