Vite适合新应用开发，Webpack适用于深度定制和遗留系统，Rollup专精于库打包；三者底层依赖AST分析但抽象层级不同，选错会拖慢迭代。
打包和构建不是必须的，但现代 JS 项目几乎离不开它
纯 HTML 中直接写 <script> 或引入 CDN 脚本确实能跑起来，但一旦用到 import、TypeScript、JSX、CSS 模块、环境变量或需要压缩/分包/Tree Shaking，就必须走打包流程。不打包 = 无法在浏览器中运行多数 npm 包，也无法做生产优化。
Vite 是当前最轻快的默认选择，尤其适合新项目
它用原生 ES 模块实现“无打包启动”，开发时零配置就能热更新，vite build 默认调用 Rollup 打包生成静态资源。相比 Webpack，启动更快、配置更少、默认支持 TS 和 JSX。
-
vite开发服务器不打包，只按需编译单个模块（所以快） -
vite build实际执行的是rollup，输出产物结构清晰、默认启用 Tree Shaking - 若项目含大量 Webpack 插件生态（如
webpack-bundle-analyzer），迁移到 Vite 需重写插件逻辑 - 不推荐强行用 Vite 替换老 Webpack 项目——除非愿意重构构建逻辑和 loader 规则
Webpack 仍是复杂定制场景的事实标准
当你要精细控制 chunk 分割、自定义 loader（比如解析 .proto 文件）、注入运行时代码、或对接旧版 CMS 构建管道时，webpack 的配置粒度仍不可替代。但它需要显式配置 entry、output、module.rules 和 plugins。
-
mode: 'production'自动启用压缩、Scope Hoisting、Tree Shaking（要求模块是 ESM 格式） -
splitChunks配置不当会导致 vendor 包重复或过大；常见错误是把动态import()写成静态import，导致无法分包 -
webpack-dev-server的 HMR 有时会丢失状态，需配合react-refresh或vue-loader插件修复 - 升级 Webpack 5 后，
node_modules不再自动 polyfill，需手动加resolve.fallback或用node-polyfill-webpack-plugin
Rollup 更适合库（library）打包，而非应用（app）
如果你在写一个 npm 包（比如 use-swr 或 zustand），rollup 是首选：它专注生成干净的 UMD/ESM/CJS 输出，天然支持 external 排除依赖、treeshake 精确剔除未用导出。
立即学习“Java免费学习笔记（深入）”；
-
rollup.config.js中漏写external: ['react', 'react-dom']→ 打包结果会把 React 捆进去，使用者运行时报错“Duplicate React” - 想同时输出 ESM 和 CJS？得配
output.format: ['es', 'cjs']并设不同file路径，否则会被覆盖 - 不支持
require.ensure或System.import这类 Webpack 特有语法，动态导入只能用import() - 对 CSS、图片等资源默认无处理能力，需靠
@rollup/plugin-postcss、@rollup/plugin-image补齐
