前端打包工具完全指南#

为什么需要打包工具？#

想象一下，你写了 100 个 JavaScript 模块文件，浏览器怎么加载它们？

没有打包工具的时代：

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="module3.js"></script>
<!-- ... 99 个脚本标签 -->

这样做的问题：

• 发送 100 个网络请求，性能极差
• 全局命名污染，容易冲突
• 没有模块隔离，代码耦合度高
• 维护困难

有了打包工具： 打包工具做的事很简单——把你的代码和依赖打成一个（或几个）文件，优化体积，最后扔给浏览器加载。

源代码（100个文件）
    ↓
  分析依赖关系
    ↓
  转换语法（TS → JS、JSX → JS）
    ↓
  优化代码（Tree Shaking、代码分割）
    ↓
  生成产物（通常是1-N个JS/CSS文件）

打包工具的核心能力#

所有打包工具都需要做这几件事：

1. 模块解析：找到你代码中的 import/require，搞清楚依赖关系
2. 代码转换：把 TypeScript、JSX、Less 等转成浏览器能理解的 JavaScript 和 CSS
3. 代码优化：去掉没用的代码、压缩、提取公共模块等
4. 生成产物：输出最终的 JS/CSS/HTML 等文件

不同的打包工具在这些能力上有所侧重，这是它们的主要区别。

1. Webpack —— 全能老兵#

简介：2012 年诞生，是现代前端打包的鼻祖。

核心理念：一切皆模块。你的代码、样式、图片、字体都是模块，都可以被处理。

Webpack 的工作流程：

entry（入口文件）
    ↓
构建依赖图谱
    ↓
使用各种 loader 转换模块
    ↓
使用各种 plugin 处理资源
    ↓
输出产物

什么是 Loader？ 转换文件的工人。比如：

• babel-loader：把 ES6 转成 ES5
• css-loader：处理 CSS 中的 import 和 url()
• file-loader：处理图片和字体

什么是 Plugin？ 在 Webpack 打包过程中插入自定义逻辑。比如：

• MiniCssExtractPlugin：把 CSS 提取成单独文件
• HtmlWebpackPlugin：自动生成 HTML

Webpack 的优点：

• 功能最完整，什么都能做
• 生态最成熟，问题最多有人解答
• 对复杂项目支持最好

Webpack 的缺点：

• 配置复杂，学习成本高
• 打包速度慢（特别是大项目）
• 配置文件动辄几百行

适用场景：

• 大型复杂项目
• 需要细粒度控制的项目
• 老项目维护

基础配置示例：

// webpack.config.js
module.exports = {
  entry: './src/index.js',          // 入口
  output: {
    filename: 'bundle.js',          // 输出文件
    path: './dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,              // 匹配 .js 文件
        use: 'babel-loader'         // 用 babel-loader 处理
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin()         // 生成 HTML
  ]
};

2. Vite —— 现代新秀#

简介：2020 年由尤雨溪（Vue 作者）开发，现代前端开发的新标准。

核心理念：利用浏览器原生 ES modules，开发时极速，生产时用 Rollup 优化。

Vite 的巧妙之处：

开发时：
  浏览器要什么，我就给什么
  ↓
  请求 App.vue → 实时编译返回 → 浏览器加载
  请求 utils.js → 直接返回 → 浏览器加载
  （因为浏览器原生支持 ES modules）
  ↓
  启动快、热更新快

生产时：
  用 Rollup 打包优化
  ↓
  Tree Shaking、压缩、分割代码

为什么 Vite 这么快？

Webpack 在开发时：需要全量打包一遍代码，改一个文件就重新打包一遍。

Vite 在开发时：浏览器直接请求模块，Vite 只需要实时转换请求的文件。改一个文件只需转换那一个。

Vite 的优点：

• 开发体验极好，启动快、热更新快
• 配置简单，几乎零配置
• 现代浏览器支持好
• 生产环境使用 Rollup，产物优化好

Vite 的缺点：

• 只支持现代浏览器（需要 ES6 支持）
• 生态相对年轻（但发展很快）
• 某些复杂场景可能还不够成熟

适用场景：

• 新项目（推荐首选）
• 需要快速开发体验的项目
• Vue 3、React 等现代框架项目

基础配置示例：

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  },
  build: {
    outDir: 'dist'
  }
})

几乎就这么简单！

3. Rspack —— 速度猎手#

简介：字节跳动开源，用 Rust 写的打包工具，想要替代 Webpack。

核心特点：

• 兼容 Webpack 配置：配置格式和 Webpack 基本一样
• 极速构建：Rust 的性能加持，速度比 Webpack 快 5-10 倍
• 功能完整：保留了 Webpack 的大部分功能
• 渐进式迁移：可以一步步从 Webpack 迁移到 Rspack

Rspack vs Webpack：

代码对比（几乎一样）：

// Webpack
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' }
}

// Rspack
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' }
}

速度对比：

• Webpack 打包 10 秒
• Rspack 打包 1 秒

Rspack 的优点：

• 学习成本低（Webpack 用户无需学习新配置）
• 构建速度极快
• 完整功能支持大型项目

Rspack 的缺点：

• 还在 1.x 阶段，不如 Webpack 稳定
• 插件生态还在建设中
• 一些高级功能可能还不支持

适用场景：

• 想从 Webpack 升级到更快的工具
• 大型项目，对构建速度有要求
• 容忍一定风险去追求性能的团队

4. Rollup —— 库打包专家#

简介：专门为打包 JavaScript 库设计的工具。

为什么需要 Rollup？

如果你要发布一个 npm 包，使用者可能：

• 在浏览器中用 <script> 引入
• 在 Node.js 中用 require() 引入
• 在 ES6 项目中用 import 引入

Webpack 是为应用设计的，只输出一种格式的产物。而 Rollup 可以同时输出多种格式（UMD、ES module、CommonJS 等）。

Rollup 的特色功能：

1. Tree Shaking（来自 Rollup）：自动删除没用的代码
2. 多格式输出：同一份源代码可输出多种格式
3. 生成产物小：库的体积通常比 Webpack 小

Rollup 的工作流程：

source code
    ↓
parse（解析成 AST）
    ↓
bind（分析依赖）
    ↓
generate output（生成多种格式的产物）

Rollup 的优点：

• 库打包产物体积最小
• 支持多种输出格式
• 专业的库打包方案
• Tree Shaking 做得最好

Rollup 的缺点：

• 功能相对简单，不适合打包应用
• 对于静态资源（图片、CSS）支持不好
• 需要配合其他工具处理样式等

适用场景：

• 打包发布到 npm 的库
• 纯 JavaScript 库

基础配置示例：

// rollup.config.js
export default {
  input: 'src/index.js',
  output: [
    { file: 'dist/index.js', format: 'es' },      // ES module
    { file: 'dist/index.cjs', format: 'cjs' },    // CommonJS
    { file: 'dist/index.umd.js', format: 'umd' }  // UMD（浏览器）
  ]
}

5. tsup —— TypeScript 库最佳选择#

简介：基于 esbuild，专门为 TypeScript 库优化的零配置打包工具。

核心优势：零配置，开箱即用！

为什么选 tsup？

假设你写了个 TypeScript 库，用 Rollup + Babel 的方案需要：

// 各种配置...
import resolve from '@rollup/plugin-node-resolve'
import typescript from '@rollup/plugin-typescript'
import babel from '@rollup/plugin-babel'
// ... 配置文件 50+ 行

用 tsup 只需：

# 不需要配置文件，直接用！
npx tsup src/index.ts

或者简单配置：

// tsup.config.ts
import { defineConfig } from 'tsup'

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true  // 自动生成类型定义文件
})

tsup 内置能力：

• TypeScript 转译
• 自动生成 .d.ts 类型文件
• 自动处理外部依赖（可不打包）
• 输出多种格式（ESM、CJS、IIFE）
• 代码压缩

tsup 的优点：

• 配置简单，几乎零配置
• 速度快（基于 esbuild）
• TypeScript 支持最好
• 生成产物干净小巧

tsup 的缺点：

• 只适合打包库，不适合应用
• 对 CSS、图片等静态资源支持有限
• 生态相对小

适用场景：

• TypeScript 库的打包（推荐！）
• 需要快速发布 npm 包的项目

使用示例：

npm install -D tsup

# package.json
{
  "scripts": {
    "build": "tsup"
  }
}

# 默认会找 src/index.ts，输出到 dist/

6. esbuild —— 极速引擎#

简介：用 Go 写的超快 JavaScript 打包器和转译器。

性能对比（打包同一个项目）：

• esbuild：0.4 秒
• Webpack：40 秒
• Parcel：11 秒

快 100 倍！

esbuild 的哲学：速度优先，功能简化。

esbuild 的能力：

• JavaScript 转译（ES6 → ES5 等）
• 代码打包和分割
• 压缩代码
• Source maps

esbuild 不支持的：

• 直接处理 CSS、图片等（需要额外工具）
• 复杂的代码转换
• 插件系统有限

为什么这么快？ 用 Go 写的，Go 是编译型语言，而 JavaScript 是解释型语言。性能天然不在一个量级。

esbuild 的优点：

• 速度无敌
• 内存占用少
• 简单直接

esbuild 的缺点：

• 功能相对简化
• 通常作为其他工具的底层被使用（而不是直接用）
• 生态不大

适用场景：

• 作为其他工具的底层（Vite、tsup 都用它）
• 简单的代码转译任务
• 很少直接使用

7. Parcel —— 零配置之王#

简介：号称零配置的打包工具，开箱即用。

使用示例：

npm install -D parcel
npx parcel src/index.html
# 完成！自动启动开发服务器，支持热更新

就这么简单，不需要任何配置文件！

Parcel 做的聪明事：

• 自动检测文件类型，应用对应处理器
• 自动安装依赖的 loader 和 plugin
• 自动生成产物的最优格式
• 内置开发服务器和热更新

Parcel 的优点：

• 完全零配置，学习曲线平缓
• 开发体验好
• 自动处理各种资源
• 特别适合初学者

Parcel 的缺点：

• 功能不如 Webpack 全面
• 社区活跃度不如 Webpack 和 Vite
• 对大型项目的优化可能不足
• 定制化能力有限

适用场景：

• 学习者入门项目
• 快速原型和演示
• 小到中等规模项目

8. Turbopack —— 未来希望#

简介：Vercel 团队开发，用 Rust 写的超高速打包工具（还在开发中）。

现状：

• 还在 beta 阶段
• 主要集成在 Next.js 中使用
• 单独使用的场景较少

为什么值得关注？

• 由 Webpack 原作者团队开发，吸取了 Webpack 的教训
• Rust 语言保证性能
• 设计面向未来

预期特性：

• 极速构建（对标 esbuild）
• 兼容 Webpack 配置
• 完整的功能支持

适用场景：

• Next.js 项目（自动使用）
• 关注新技术的团队

核心指标对比#

场景选型决策树#

你要打包什么？
├─ 打包 Web 应用
│  ├─ 新项目 → 选 Vite（推荐）
│  ├─ 老 Webpack 项目想快速升级 → 选 Rspack
│  ├─ 需要兼容 IE → 选 Webpack
│  ├─ 快速原型演示 → 选 Parcel
│  └─ Next.js/Nuxt 项目 → 选内置工具
│
├─ 打包 npm 库
│  ├─ TypeScript 库 → 选 tsup（推荐）
│  ├─ 纯 JavaScript 库 → 选 Rollup
│  └─ 需要兼容多种环境 → 选 Rollup
│
├─ Monorepo 项目
│  ├─ 大型团队项目 → Webpack/Rspack + Nx/Turborepo
│  └─ 中小项目 → Vite + Monorepo 方案
│
└─ 学习和入门
   ├─ 完全新手 → 选 Parcel
   ├─ 想深入学习 → 选 Webpack
   └─ 想用现代工具 → 选 Vite

真实场景示例#

场景1：创建 React 应用

# 推荐方案 1：使用 Vite（最快）
npm create vite@latest my-app -- --template react
cd my-app && npm install && npm run dev

# 推荐方案 2：使用 Create React App（官方但较慢）
npx create-react-app my-app

# 为什么选 Vite？快、配置少、体验好

场景 2：发布 npm 包

# TypeScript 包 → tsup（零配置）
npm create tsup-app@latest my-lib
cd my-lib && npm run build

# JavaScript 包 → Rollup（需要配置）
# 但更灵活，输出格式更丰富

场景 3：大型项目性能优化

# 从 Webpack 迁移到 Rspack
# 步骤 1：安装 Rspack
npm install @rspack/cli @rspack/dev-server -D

# 步骤 2：复制 webpack.config.js，改名为 rspack.config.js
# （配置格式兼容，改动很少）

# 步骤 3：改 package.json 的 scripts
{
  "scripts": {
    "build": "rspack build",
    "dev": "rspack serve"
  }
}

# 步骤 4：测试，通常无需改任何代码！
# 结果：构建时间从 40s 降到 5s

什么是 Tree Shaking？#

代码中可能有用不上的函数。Tree Shaking 会自动删除它们。

// utils.js
export function used() {
  console.log('我被用到了')
}

export function unused() {
  console.log('我没被用到')
}

// app.js
import { used } from './utils.js'
used()

// 打包后：
// 打包工具会删除 unused 函数，因为没人用它
// 最终产物只包含 used 函数

哪些工具支持？

• Webpack：支持（需要配置）
• Vite/Rollup：默认支持
• tsup：默认支持

什么是代码分割（Code Splitting）？#

把一个大的打包文件分成多个小文件，按需加载。

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}

// 打包结果：
// dist/
//   main.js (页面特定代码)
//   vendor.js (第三方库)
//   common.js (公共代码)

为什么这样做？

• 减少首屏加载体积
• 利用浏览器缓存（库代码更新不频繁）
• 按需加载，提升性能

什么是 Source Map？#

浏览器加载的是压缩后的代码，出错时只能看到压缩后的堆栈。Source Map 提供了压缩前源码的映射。

// 源代码（开发时看到的）
const myVar = 123
console.error(myVar)

// 压缩后（生产环境）
const a=123;console.error(a)

// Source Map 告诉浏览器：
// 压缩后的变量 a 对应源代码的 myVar

调试时的区别：

没有 Source Map：
浏览器报错：line 1, console.error(a)  ← 看不懂

有 Source Map：
浏览器报错：line 3, console.error(myVar)  ← 清楚明了

什么是 Hot Module Replacement（热更新）？#

修改代码后，不需要刷新页面，只更新改变的模块。

// 源代码
function render() {
  return '<h1>Hello</h1>'
}

// 你改成
function render() {
  return '<h1>Hello World</h1>'
}

// 不需要刷新页面，HMR 会自动更新页面内容

不同工具的 HMR 表现：

• Webpack：支持，但需要配置
• Vite：默认支持，速度最快
• Rspack：支持，速度快

什么是 Loader 和 Plugin？#

这是 Webpack 特有的概念，其他工具有类似的机制。

Loader（加载器）：转换文件的工具链

rules: [
  {
    test: /\.css$/,                    // 匹配 CSS 文件
    use: ['style-loader', 'css-loader'] // 依次处理
  }
]

// 执行顺序（从右到左）：
// .css 文件 → css-loader（处理 CSS 语法）
//          → style-loader（把 CSS 注入页面）

Plugin（插件）：在打包过程中插入自定义逻辑

plugins: [
  new HtmlWebpackPlugin({
    // 在 打包后自动生成 HTML 文件
    template: 'src/index.html'
  })
]

// 插件的生命周期钩子：
// compiler.plugin('emit', () => {})      // 打包完成，写入文件前
// compiler.plugin('done', () => {})      // 打包完成

快速创建 Vite 项目#

npm create vite@latest my-project -- --template react
cd my-project
npm install
npm run dev
# 访问 http://localhost:5173

快速创建 tsup 库#

mkdir my-lib && cd my-lib
npm init -y
npm install -D tsup typescript

# 创建文件
mkdir src
echo "export const hello = () => 'Hello'" > src/index.ts

# 打包
npx tsup

# 检查 dist/ 目录，完成！

快速创建 Webpack 项目#

mkdir my-webpack && cd my-webpack
npm init -y
npm install -D webpack webpack-cli @babel/core @babel/preset-react babel-loader

# 创建 webpack.config.js（前面有例子）
# 创建 src/index.js
# npm run build