前端工程化入门：Webpack和Vite该怎么选

新项目直接选 Vite，存量大型 Webpack 项目不要为了「新」而迁移。判断标准只有三条：项目是不是新建、依赖里有没有 Webpack 独有的能力（如 Module Federation）、团队是否需要兼容 IE11 这类老浏览器。三条都偏向「旧」的那一边，就留 Webpack。

Webpack 和 Vite 的核心区别是什么

结论：Webpack 是「先打包再启动服务」，Vite 是「开发时先不打包、直接用浏览器原生 ESM 按需加载」。

Webpack 5（2020 年 10 月发布）在 dev 阶段会把整个依赖图打包成 bundle 放进内存，再交给 webpack-dev-server 提供服务。项目越大，打包耗时越长，所以一个中型项目（依赖 1500+ 个模块）冷启动常见 15-40 秒。

Vite 的开发服务器不做打包：浏览器请求 /src/main.js，服务器才实时编译这一个文件返回，改哪个文件编哪个文件。它的快不是「优化出来的快」，而是「少做了打包这件事」。生产构建 Vite 走的是 Rollup（Vite 6 起可用 Rolldown 内核替换）。

为什么 Vite 开发时启动比 Webpack 快这么多

结论：Vite 用 Go 写的 esbuild 预构建依赖，速度比 JavaScript 写的打包器快 10-100 倍，把最耗时的 node_modules 部分一次性做完了。

具体分两步：第一次启动时，Vite 用 esbuild 把 react、vue、lodash 这类 CommonJS/UMD 依赖转成 ESM，缓存到 node_modules/.vite；之后浏览器请求源码文件，Vite 只做单文件转换。所以第二次启动通常不到 1 秒。

热更新（HMR，修改代码后浏览器局部刷新）同理：Vite 只失效被改模块所在的链路，官方标称 HMR 时间通常在 50 毫秒以内，且不随应用体积增长；Webpack 的 HMR 在模块多时常见 300 毫秒到 2 秒。

注意一个坑：首次冷启动 Vite 要预构建依赖，反而可能比 Webpack 慢几秒，第二次开始才是它的主场。

什么情况必须继续用 Webpack

结论：需要 Module Federation 微前端、需要兼容 IE11、或者项目已经深度定制了 loader/plugin 链条时，Webpack 仍是更稳的选择。

Module Federation（模块联邦，Webpack 5 引入的运行时共享模块方案）是 Webpack 的原生能力，Vite 侧需要 @originjs/vite-plugin-federation 或 Module Federation 2.0 插件，成熟度和边界处理仍有差距，生产事故成本较高。

浏览器兼容方面，Webpack 配合 babel-loader + core-js 可以产出 ES5 代码跑在 IE11 上；Vite 的开发服务器依赖浏览器原生 ESM，生产构建默认 build.target 是 'modules'（Chrome 87 / Firefox 78 / Safari 14 起），要降级就得额外引入 @vitejs/plugin-legacy，包体积会明显变大。

另外，如果你的 webpack.config.js 里有大量自研 loader 和自定义 plugin，迁移成本通常高于收益，继续升到 Webpack 5 更划算。

从 Webpack 迁移到 Vite 要改哪些配置

结论：迁移的主要工作量在配置映射和 API 替换，常见项目 1-3 天可以跑通，难点是自定义 loader。

常见的对应关系如下：

• babel-loader → @vitejs/plugin-react（或 Vue 用 @vitejs/plugin-vue）
• css-loader / style-loader / sass-loader → Vite 内置，装 sass 即可
• file-loader / url-loader → 直接用 import url from './a.png?url'，小文件自动内联
• require.context('./dir', true, /\.js$/) → import.meta.glob('./dir/**/*.js')
• process.env.XXX → import.meta.env.VITE_XXX，注意只有 VITE_ 前缀的变量才会注入客户端
• resolve.alias → 写在 vite.config.js 的 resolve.alias，server.proxy 对应原来的 devServer.proxy

还有一个容易忽略的点：启用 ESM 后需要在 package.json 里加 "type": "module"，否则 vite.config.js 里的 import 会报错（改成 vite.config.mjs 也行）。

Vite 版本和 Node 版本怎么选

结论：2025 年新建项目直接用 Vite 7，Node 版本至少 20.19+ 或 22.12+。

Vite 的版本门槛很清楚：Vite 5（2023 年 11 月）要求 Node 18+；Vite 6（2024 年 11 月）要求 Node 18+/20+；Vite 7（2025 年 6 月）要求 Node 20.19 或 22.12 以上。Node 版本不满足时直接报错，不会静默降级，所以升级 Vite 前先确认 CI 和本地 Node 版本对齐。

总结一句：新项目、以现代浏览器为目标的项目，选 Vite；需要 Module Federation、IE11 兼容、或已有重度定制 Webpack 配置的项目，继续用 Webpack 5。迁移别一次性全量替换，先在新分支跑通 dev 和 build 两条链路再合并。