现代 JavaScript 项目应选对工具链：新项目用 Vite（启动快、热更新准），旧 Webpack 项目或需 IE11/UMD/动态 require 则留用 Webpack；vite build 默认用 Rollup 处理 define、public 目录和 hash 文件名；部署前须检查 base 路径、outDir 与 Nginx 配置一致、HTML 中 script 标签是否由 Vite 自动注入。
现代 JavaScript 项目不靠手写打包脚本，核心是选对工具链并理解它在做什么——否则你改了 webpack.config.js 却不知道为什么 node_modules 里的模块没被正确解析，或者 import.meta.env.PROD 在生产环境里还是 undefined。
用 Vite 还是 Webpack？看你的构建目标
Vite 默认只在开发时按需编译，生产构建走 esbuild + rollup，启动快、热更新准，适合大多数新项目；Webpack 更灵活但配置重，适合需要深度定制分包、运行时 require、legacy 浏览器兼容的场景。
- 新项目、TS + React/Vue、要快速验证想法 → 直接
npm create vite@latest - 已有 Webpack 项目、用了
DllPlugin或自定义 loader → 别硬切 Vite，维护成本高 - 要输出 UMD、支持 IE11、或必须用
require('module') + 'string'动态拼路径 → Webpack 仍是更稳的选择
build 命令背后发生了什么？别跳过 vite build 的默认行为
Vite 生产构建默认启用 rollup，但会自动注入 define（如 import.meta.env）、处理 public/ 目录、生成带 hash 的文件名——这些不是“魔法”，而是 vite.config.ts 里 build.rollupOptions 和 define 配置的结果。
-
vite build不会读取.env.production以外的环境变量，.env.development里的内容在 build 时不可见 - 静态资源如
public/logo.png会被原样复制到输出目录，但路径必须写成/logo.png（以/开头），不能用./public/logo.png - 如果用了
build.lib模式（比如写一个 UI 组件库），rollupOptions.external必须显式声明依赖，否则 Vue/React 会被打进包里
如何让打包产物真正可部署？关键检查三件事
很多项目本地 dist/ 能打开，一扔到 Nginx 就白屏或 404，问题往往出在基础路径、静态资源引用和 HTML 入口上。
立即学习“Java免费学习笔记（深入）”；
-
base配置决定所有资源的根路径：部署在子路径（如https://a.com/my-app/）时，必须设base: '/my-app/'，否则 JS/CSS 请求会发向/assets/index.xxxx.js而不是/my-app/assets/index.xxxx.js -
build.outDir改了之后，Nginx 的root或alias必须同步调整，不能只改前端配置 - HTML 中的
标签由 Vite 自动注入，但如果你手动写了，它不会被处理，也不会被转成带 hash 的路径
打包不是终点，而是验证起点。最常被忽略的是 public 目录下的文件是否真被引用、base 是否和部署路径完全一致、以及环境变量是否在构建时就已内联进代码——这些地方一错，调试时看到的错误信息往往离真实原因隔了两层。
