JavaScript打包依赖Webpack、Vite、Rollup等工具，核心是配置而非编码：Webpack成熟适中大型项目需手动配置；Vite开箱即用、开发快，适合业务项目；Rollup专注类库打包，强调Tree-shaking与多格式输出。
JavaScript 代码打包主要靠模块打包工具（如 Webpack、Vite、Rollup）把多个模块（import/export）、资源（CSS、图片）、第三方库整合成一个或多个优化后的文件，供浏览器加载。核心不是“写 JS”，而是配置工具来描述“怎么合并、转换、分割和输出”。
Webpack：最成熟，适合中大型项目
安装后需手动配置入口、输出、loader（处理非 JS 文件）、plugin（扩展功能）：
- 入口（
entry）指定主 JS 文件，比如./src/index.js - 输出（
output）定义打包后文件名和路径，常设filename: '[name].[contenthash].js'实现缓存控制 - 用
babel-loader转译 ES6+ 语法，配合@babel/preset-env - 用
css-loader + style-loader处理import './style.css' - 加
HtmlWebpackPlugin自动生成带正确 script 标签的 HTML
Vite：开箱即用，开发体验快
不需要手动写打包配置——默认基于 Rollup 打包生产环境，开发时直接用原生 ES 模块按需编译，启动秒级。只需一个 vite.config.js 就能覆盖大部分需求：
- 改
build.outDir指定输出目录 - 用
build.rollupOptions.external排除 CDN 引入的库（如 React） - 加
css.preprocessorOptions配置 Sass 变量全局注入 - 插件生态丰富，比如
vite-plugin-svg-icons直接导入 SVG
Rollup：专注类库打包，输出更干净
适合打包 npm 包（如工具函数库），默认不处理 CommonJS，强调 Tree-shaking 和输出格式（cjs/esm/iife）：
立即学习“Java免费学习笔记（深入）”；
-
input是入口文件，output可同时指定多种格式：format: 'es'和format: 'cjs' - 用
@rollup/plugin-node-resolve找 node_modules 里的模块 - 用
rollup-plugin-terser压缩代码 - 通过
external声明 peerDependencies（如 lodash），避免打进去
基本上就这些。选哪个取决于场景：业务项目推荐 Vite，老项目迁移或需深度定制选 Webpack，发包给他人用优先 Rollup。
