选构建工具应匹配项目类型与团队能力：小项目用Vite，中大型用Webpack，库用Rollup，提速用esbuild/SWC；核心配置优先入口输出、模块解析、TS支持、HMR；迁移宜渐进，协作需统一配置包。
选构建工具不看名气，看项目实际需求和团队熟悉度。小项目用 Vite 开箱即用，中大型项目考虑 Webpack 灵活性，纯前端库推荐 Rollup，TypeScript 为主可搭配 esbuild 加速。
按项目类型匹配主流工具
Vite 适合大多数现代前端项目，尤其 React/Vue 单页应用。启动快、热更新准、默认支持 TypeScript 和 JSX，配置极少就能跑起来。新建项目直接 npm create vite@latest，选框架和预设即可。
Webpack 适合需要深度定制的中大型工程，比如多环境构建、复杂资源处理（SVG 雪碧图、字体子集）、自定义 loader/plugin。配置虽多，但生态成熟，文档丰富，遇到问题容易查到方案。
Rollup 更适合打包 npm 包，输出体积小、tree-shaking 精确、天然支持 ESM。搭配 @rollup/plugin-typescript 和 rollup-plugin-terser 就能完成标准库构建流程。
立即学习“Java免费学习笔记（深入）”；
esbuild 和 SWC 是编译加速型工具，不单独作为构建系统，常嵌入 Vite 或自建脚本中。esbuild 编译 TS/JS 快一个数量级，SWC 在 React 场景下支持 Refresh 和 JSX 转换，适合对构建速度敏感的团队。
核心配置项优先级排序
不管用哪个工具，先确认这四点：
-
入口与输出路径：明确
src/index.tsx是入口，dist是目标目录，避免打包错文件或漏资源 -
模块解析规则：配好
resolve.alias（如@/*指向src/*），统一路径引用，减少相对路径混乱 -
TypeScript 支持：Vite 自动读
tsconfig.json；Webpack 需ts-loader或swc-loader；Rollup 用@rollup/plugin-typescript -
开发服务与 HMR：确保本地启动后能自动打开浏览器、保存即刷新、报错不中断服务。Vite 默认达标；Webpack 需检查
devServer.hot和devServer.watchFiles
常见陷阱与绕过方式
别在 Vite 中强行复刻 Webpack 的 DefinePlugin 写法——改用 define 配置项传入全局常量，语法是字符串化对象，例如 { __VERSION__: JSON.stringify('1.2.0') }。
Webpack 打包时发现 CSS 报错，大概率是忘了装 style-loader 或 css-loader，且顺序不能颠倒：必须 css-loader 在前解析 @import 和 url()，style-loader 在后注入 DOM。
Rollup 打包后提示 “Missing export”，检查 output.exports 是否设为 'named'，再确认源码中 export const foo = ... 有明确命名，避免只写 export default 却又在外部用命名导入。
esbuild 不支持动态 import() 的路径别名，如果用了 import('@/utils')，得先用插件（如 esbuild-plugin-alias）转成相对路径，否则构建失败。
渐进式迁移建议
老项目从 Webpack 迁移到 Vite，不必一步重写配置。先用 vite-plugin-legacy 支持旧浏览器，再逐步把 webpack.config.js 中的 loader 规则对应到 Vite 的 optimizeDeps.include 或插件中。
已有 Rollup 库想加 React 支持，不用换工具。加 @rollup/plugin-react-refresh 插件，配合 @pmmmwh/react-refresh-webpack-plugin 类似逻辑，就能实现组件热替换。
团队多人协作时，把构建配置抽成独立包（如 @myorg/vite-config），通过 import { defineConfig } from '@myorg/vite-config' 复用，避免各项目配置散落、版本不一致。
