JavaScript模块打包工具需按项目类型、环境和依赖选择：Webpack需手动配置loader和resolve；Vite开发用ES模块、构建用Rollup；Esbuild极快但无HMR和代码分割，适合转译和工具链。
JavaScript 模块打包工具不是“选一个装上就能用”，关键看你的项目类型、目标环境和依赖结构——现代项目基本绕不开 webpack、vite 或 esbuild，但它们的启动方式和配置重心完全不同。
Webpack 需要显式配置入口和 loader 才能处理 ES 模块
它默认不识别 import/export，也不处理 .jsx 或 .ts。你得手动加 module.rules：
-
babel-loader转译新语法（比如可选链、top-level await） -
ts-loader或swc-loader处理 TypeScript 类型擦除 - 若用 CSS 模块，必须配
css-loader+style-loader，否则import './index.css'会报错
常见错误：ERROR in ./src/index.js 1:0-26 Module not found: Error: Can't resolve './utils' ——多半是 resolve.extensions 没配 '.js' 或 '.ts'，导致 import utils from './utils' 找不到 utils.ts。
Vite 开箱即用但只在开发时生效，构建仍走 esbuild + rollup
它用原生 ES 模块跑 dev server，所以 import.meta.env、import.meta.glob 这类特性直接可用；但执行 vite build 时，实际调用的是 rollup（可通过 build.rollupOptions 调整），不是 Vite 自己打包。
立即学习“Java免费学习笔记（深入）”；
- 别在
vite.config.js里写 webpack 风格的plugins，Vite 插件 API 不兼容 -
define配置只作用于构建阶段，dev 时import.meta.env是 proxy，不能被JSON.stringify直接序列化 - 若用
require('./data.json')，需开启resolve.alias或改用import data from './data.json?raw'
Esbuild 极快但缺失运行时能力，适合纯转译或 CLI 工具链
它不做代码分割、不支持 require.ensure、没有 HMR，本质是“超快的 TypeScript/JS 编译器”。适合：
- 将 TS 库编译为多格式（
cjs/esm/iife）发布 - 作为其他工具（如
vitest、swc）底层依赖，不直接暴露给应用层 - CI 中快速验证语法：
esbuild --check --jsx=automatic src/index.tsx
注意：esbuild 不解析 node_modules 中的 exports 字段，遇到 "exports": { ".": { "import": "./dist/esm/index.js" } } 会 fallback 到 main，可能引入非 ESM 版本。
真正卡住人的往往不是“怎么装”，而是没意识到：打包器决定模块解析规则、影响 tree-shaking 效果、甚至改变 this 绑定行为。比如 webpack 的 output.libraryTarget: 'umd' 和 vite 的 build.lib 输出结构完全不同，连 require('pkg') 是否能拿到默认导出都可能出问题。
