17370845950

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）：

• input 是入口文件，output 可同时指定多种格式：format: 'es' 和 format: 'cjs'
• 用 @rollup/plugin-node-resolve 找 node_modules 里的模块
• 用 rollup-plugin-terser 压缩代码
• 通过 external 声明 peerDependencies（如 lodash），避免打进去

基本上就这些。选哪个取决于场景：业务项目推荐 Vite，老项目迁移或需深度定制选 Webpack，发包给他人用优先 Rollup。