如何打包代码_现代javascript项目如何构建【教程】

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《如何打包代码_现代javascript项目如何构建【教程】》，聊聊，希望可以帮助到正在努力赚钱的你。

现代 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 入口上。

• 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 中的