前言

Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具（Static Module Bundler），在next.js等现代前端框架中有重要作用，经常被和vite进行对比。我想要通过这篇文章总结一下Webpack的基本使用和核心原理，以及包括一些Webpack的进阶拓展如Rspack、Turbopack等。

为什么需要webpack

早期的浏览器不支持模块化开发，前端开发者需要将多个JS文件通过script标签引入到HTML中

1
2


<script src="a.js"></script>
<script src="b.js"></script>

这种方式很容易出现一些问题，比如出现命名冲突、依赖管理困难、加载顺序不确定等。Webpack的出现解决了这些问题，它可以将多个模块打包成一个或多个文件，并且可以处理模块之间的依赖关系，通过打包还可以进行代码压缩、优化和分割，提高网页的加载速度和性能。

Webpack的基本使用

webpack的基本安装配置和运行

webpack依赖node.js，可以直接通过npm或者pnpm安装，首先需要在项目中初始化一个package.json文件(npm init)，然后安装webpack和webpack-cli：

1

pnpm/npm install --save-dev webpack webpack-cli

之后在项目根目录下创建一个webpack.config.js文件，配置webpack的入口和输出：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


const path = require("path");

module.exports = {
  // 1. 设置打包模式：'development'（开发模式，注重编译速度与调试） 或 'production'（生产模式，自动开启压缩和优化）
  mode: "development",

  // 2. 入口文件：Webpack 从哪里开始构建依赖图
  entry: "./src/index.js",

  // 3. 出口配置：打包后的文件存放在哪里
  output: {
    filename: "main.js", // 打包后的文件名
    path: path.resolve(__dirname, "dist"), // 输出目录的绝对路径（dist 目录）
    clean: true, // 每次打包前自动清空 dist 目录
  },

  // 4. Loader 加载器：配置处理非 JS/JSON 文件的规则
  module: {
    rules: [
      {
        test: /\.css$/i, // 匹配以 .css 结尾的文件
        use: ["style-loader", "css-loader"], // 注意：执行顺序是从右往左/从下往上！
      },
    ],
  },

  // 5. Plugins 插件：扩展打包功能
  plugins: [
    // 这里未来可以放入 HtmlWebpackPlugin 等插件
  ],
};

然后在package.json中添加一个脚本命令来运行webpack：

1
2
3
4
5


{
  "scripts": {
    "build": "webpack"
  }
}

之后可以通过运行以下命令来打包项目：

1

pnpm/npm run build

每次都要运行这个打包命令有点麻烦，所以可以使用webpack-dev-server和html-webpack-plugin来实现热更新和自动刷新页面，并且可以自动生成HTML文件，在界面中展示。

1

pnpm/npm install --save-dev webpack-dev-server html-webpack-plugin

然后在webpack.config.js中添加devServer配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


devServer: {
  static: './dist', // 告诉服务器从哪里提供内容
  hot: true, // 启用热模块替换（HMR）
  open: true, // 自动打开浏览器
  port: 8080, // 指定端口号
},

plugins: [
  new HtmlWebpackPlugin({
    template: './index.html', // 指定HTML模板文件
  }),
],

之后在package.json中添加一个脚本命令来启动开发服务器：

1
2
3
4
5


{
  "scripts": {
    "start": "webpack serve"
  }
}

这样就可以通过运行以下命令来启动开发服务器：

1

pnpm/npm start

我们可以在浏览器中访问 http://localhost:8080 来查看打包后的页面，并且在修改源代码后，浏览器会自动刷新页面。

在next.js中使用webpack

Next.js 是一个基于 React 的前端框架，它内置了对 Webpack 的支持。在Next.js 15之前，Next.js 默认使用 Webpack 5 作为其打包工具，在Next.js 16+，Next.js 全面使用 Turbopack 作为其打包工具，但仍然保留了对 Webpack 的支持。你可以通过配置文件来定制 Webpack 的行为。

next.js中的webpack

创建了一个Next.js项目后，Next.js会自动配置Webpack生成next.config.js(或者next.config.mjs)文件，你可以在next.config.mjs中自定义Webpack配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


// next.config.mjs
/** @type {import('next').NextTypes.NextConfig} */
const nextConfig = {
  // 扩展 webpack 配置
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
  ) => {
    // 示例：添加处理 SVG 的 Loader (如 @svgr/webpack)
    config.module.rules.push({
      test: /\.svg$/i,
      use: ["@svgr/webpack"],
    });

    // 示例：配置路径别名或全局 externals
    if (isServer) {
      // 仅在服务端打包时生效的逻辑
    }

    // 必须返回修改后的 config 对象
    return config;
  },
};

export default nextConfig;

之后脚本的运行方式和普通的Next.js项目一样，这里不再赘述。

Webpack的核心原理

Webpack的核心是依赖图（Dependency Graph）和模块打包（Module Bundling）。Webpack会从入口文件开始，递归地解析所有依赖的模块，构建出一个依赖图，然后根据这个依赖图将所有模块打包成一个或多个文件。

完整构建流程

webapck的完整打包构建大概包含七个阶段：

步骤	流程阶段	核心任务与内部逻辑	关键工具 / 概念介入	关键输出 / 状态
01	初始化阶段 (Initialization)	1. 读取配置文件与 CLI 参数并合并 2. 实例化全局 `Compiler` 对象 3. 遍历 `plugins` 数组，调用 `plugin.apply(compiler)` 注册并挂载所有 Hook 监听器 4. 确定打包的 `Entry` 入口	Tapable（事件发布订阅架构）、`Compiler` 实例	`Compiler` 实例化完成，插件全部注册完毕
02	编译构建阶段 (Module Graph Construction)	1. 从 Entry 递归解析模块 2. 调用 Babel / SWC 等 Loader 将高版本 JS/TS/JSX 或 Sass/Less 等翻译转换 3. Webpack 利用 Babel/Acorn 生成 AST 语法树，分析 `import/export` 依赖 4. 收集导出标记，为 Tree-Shaking 准备	babel-loader / swc-loader、Acorn（AST 解析器）、`Compilation` 实例	构建出完整的 Module Graph（模块依赖图）
03	优化与摇树阶段 (Optimization & Tree-Shaking)	1. 遍历 Module Graph 2. 评估 `package.json` 中的 `sideEffects` 标记 3. 标记未使用的导出字段（Unused Exports） 4. 执行死代码剔除标记逻辑	Webpack 内置优化逻辑（如 `FlagDependencyUsagePlugin`）	干净且无死代码标记的依赖关系
04	代码分割与 Chunk 组装 (Chunk Graph Assembly)	1. 结合 Entry 配置与 `SplitChunksPlugin` 2. 处理动态导入 `import()` 拆包点 3. 将关联的 Module 组合分配为独立的 Chunk	`SplitChunksPlugin`、动态导入解析器	组装完成 Chunk Graph（代码块图）
05	代码生成与 Source Map 挂载 (Code Generation)	1. 针对每个 Chunk 生成最终运行代码 2. 注入 Webpack Runtime 胶水代码（如 `__webpack_require__`） 3. 利用 `SourceMapGenerator` 计算并生成字符位置映射	`SourceMapGenerator`、Webpack Template 引擎	包含 Runtime 胶水代码和 Source Map 的完整 Chunk
06	代码压缩 (Minification)	1. 调用压缩工具进行 AST 压缩处理 2. 清理所有无用空格、注释与不可达分支 3. 执行变量名混淆（Mangle）与短语法替换	TerserWebpackPlugin / SWC Minifier / ESBuild	体积分数大幅减小、经混淆的高效代码文件
07	文件输出 (Emit & Assets)	1. 结合 `output.filename` 计算 Hash（如 `contenthash`） 2. 将内存中的 Asset 资源列表写入磁盘目标目录	`compiler.inputFileSystem` / `outputFileSystem`	目标静态资源落地写入到 `dist` 目录

核心概念与过程

其中我们需要知道十个核心概念和四个核心过程：

十个核心概念：

核心概念	英文名称	概念定位	核心作用与原理
入口	Entry	依赖起点	告诉 Webpack 从哪个文件开始分析依赖关系图（如 `./src/index.js`），是构建依赖树的根节点。
出口	Output	产物目标	定义打包后文件的输出位置（`path`）以及文件名命名规则（`filename`），指示打包结果落盘的位置。
加载器	Loader	文件翻译官	Webpack 原生仅识别 JS/JSON。Loader 负责将 CSS、Sass、TS、图片等非 JS 资源转译为 Webpack 可处理的有效模块。
插件	Plugin	功能扩展器	基于 Tapable 事件钩子机制，贯穿整个打包生命周期，执行范围更广的任务（如代码压缩、注入 HTML、清除目录等）。
模式	Mode	环境开关	区分开发（`development`，注重构建速度与调试）与生产（`production`，自动开启代码压缩与摇树优化）环境。
模块	Module	源码单元	在 Webpack 世界中“一切皆模块”。开发时编写的每一个 JS、CSS、图片等单独文件，在编译过程中都被视为一个 Module。
代码块	Chunk	组织形态	Webpack 在打包过程中的中间存在形态。由 Entry 入口文件或动态加载点（Code Splitting）引用的多个 Module 组合而成。
文件包	Bundle	最终产物	打包完成后最终输出到 `dist` 目录、可直接被浏览器加载运行的静态文件（如 `main.js`），通常由 Chunk 转换而来。
编译器	Compiler	全局指挥官	代表整个 Webpack 启动到结束的全局单例对象。包含所有的配置信息、环境变量和生命周期 Hook，贯穿进程始末。
单次构建	Compilation	具体执行者	代表某一次具体的编译过程（文件修改触发热更新时会重新创建）。包含当前的模块资源、编译后的 Chunk 以及产物信息。
语法树	AST	语法结构载体	源代码的抽象树状结构表示。Webpack 解析依赖、Babel/SWC 代码转译、Terser 混淆压缩以及 Tree-Shaking 剔除死代码，底层都是通过分析与修改 AST 节点来实现的。

四个核心过程：

核心过程	英文名称	概念定位	核心作用与原理解析
摇树优化	Tree-Shaking	死代码消除	在打包时剔除 JS 中未被引用的代码（Dead Code）。基于 ES Modules 的静态分析特性，对模块间的导入导出进行依赖追踪，把永远不会执行的函数和变量排除在最终 Bundle 之外。
代码映射	Source Map	调试辅助工具	建立打包压缩后的生产环境代码（Bundle）与原始开发代码之间的映射关系文件（如 `.js.map`）。当线上代码抛出异常时，能够精准定位到源码的行与列，极大方便问题排查。
代码压缩	Minification	体积极致优化	通过解析 AST，对打包代码进行深度瘦身：移除所有注释、空格与缩进，将长变量名与函数名替换为极短字母（混淆 Mangle），并进行等价语法精简（如简化 `if-else`），大幅减小网络传输体积。
代码转译	Babel / SWC	兼容性工具链	将现代 ECMAScript（ES6+）、JSX、TypeScript 等高版本语法，转译为旧版浏览器兼容的 JavaScript 代码（如 ES5），确保应用在不同设备和浏览器上都能正常运行。

Babel vs SWC 核心维度对比

对比维度	Babel	SWC (Speedy Web Compiler)
底层实现语言	JavaScript (运行于 Node.js)	Rust
编译性能	较慢（随着单线程 JS 处理大项目而变慢）	极快（比 Babel 快 20 ~ 70 倍，原生支持多线程并行）
构建生态	极度成熟，拥有数千个插件及完善社区支持	正在迅速演进，已全面替代 Babel 成为 Next.js/Rspack 等现代工具默认编译器
转译功能	ES6+ 转译、JSX/TS 解析、Polyfill 自动注入	完整兼容 Babel 的基础转译能力（ES6+/JSX/TS）
压缩功能	自身仅专注转译，压缩需依赖 Terser 插件	原生支持代码压缩（SWC Minifier），且性能远超 Terser
扩展方式	编写自定义 Babel 插件极为简单（JS 生态）	需使用 Rust 开发 WASM 插件，门槛相对更高

Webpack开发环境与生产环境打包策略差异

核心构建阶段	开发环境 (Mode: ‘development’)	生产环境 (Mode: ‘production’)	开发环境策略变化 / 简化原因
1. 初始化阶段	开启 DevServer 监听，在内存中构建虚拟文件系统	解析环境变量，准备将产物写入磁盘 `dist` 目录	调整：产物只存放在内存（Memory FS），省去磁盘 I/O 开销。
2. 编译构建阶段	开启增量编译，追踪修改的文件模块	全量分析并构建完整的 Module Graph	优化：配合 HMR，仅重新编译发生变动的 Module。
3. 优化与摇树阶段 (Tree-Shaking)	❌ 不启用（或仅做简单的标记）	✅ 全面启用（标记 Unused Exports 并彻底剔除死代码）	❌ 省略：计算静态依赖和剔除未引用代码极其耗时，开发阶段无需移除死代码。
4. 代码分割 (Code Splitting)	简化分割，尽量少拆包（保留完整的开发者可读结构）	✅ 深度拆包（SplitChunks + 动态导入提取公共包）	⚠️ 简化：仅进行必要的模块隔离，减少复杂的分包计算以提升编译速度。
5. Source Map 挂载	使用 `eval-cheap-module-source-map` 等高效构建模式	使用 `source-map` 或完全关闭（或仅生成独立 `.map`）	优化：开发环境追求快速构建并能定位到源码行；生产环境追求安全性与体积。
6. 代码压缩 (Minification)	❌ 不启用（保留格式化空格、缩进与长变量名）	✅ 全面开启（调用 Terser/SWC 执行压缩与变量名混淆）	❌ 省略：代码混淆压缩极其消耗 CPU 和时间，且压缩后无法在开发工具中阅读。
7. 文件输出 (Emit & Assets)	输出包含 HMR Runtime 胶水代码的内存 Bundle，自动插入网页	计算 `contenthash` 并写出带长效缓存标记的真实磁盘文件	调整：开发环境采用简单固定的文件名，避免每次改动都重新计算 Hash。

Webpack的进阶拓展

Rspack 是由字节跳动（ByteDance）开源的、基于 Rust 语言重写的高性能 JavaScript 打包工具。而Turbopack 是由 Vercel 团队推出、使用 Rust 语言编写的新一代高性能 JavaScript/TypeScript 打包工具（Bundler）。两者都是使用Rust来对Webpack进行优化和改进的工具，旨在提高构建速度和性能。两者各自有特点和优势，适用于不同的场景和需求。

Webapck vs Vite

对比维度	Webpack	Vite
底层定位	传统打包工具 (Bundler) 采用全量打包思想，构建出静态 bundle 产物。	下一代前端开发构建工具 (Dev Server + Bundler) 基于原生 ESM 的 No-Bundle 思想，结合 Esbuild 和 Rollup。
开发环境机制	全量/增量打包 (Bundle-based) 冷启动时需要递归分析整个依赖图，把所有模块打包进内存后才能启动服务。	基于原生 ESM (No-Bundle) 利用浏览器的原生 `import` 按需加载页面，利用 Go 语言写的 Esbuild 预构建第三方依赖（`node_modules`）。
生产环境机制	基于自身的依赖图和插件体系打包为 `bundle.js`。	使用 Rollup 进行生产环境打包，优化分包、Tree-Shaking 与 CSS 提取。
冷启动速度	较慢（随项目模块数量增长成线性变慢，大型项目需十几秒至几分钟）。	极快（毫秒级）（无需提前打包，只处理当前请求的路由模块）。
热更新速度 (HMR)	较慢（随着项目变大，重新分析与重新编译的开销增加）。	极快（利用浏览器 ESM 缓存，修改哪个文件只让浏览器重新请求该文件，与项目规模无关）。
配置与开箱即用	配置繁琐（需要手动安装和配置很多 Loader、Plugin 才能处理 CSS、TS、图片等）。	开箱即用（原生支持 TypeScript、JSX、CSS Modules、Sass 等，几乎零配置）。
生态与扩展性	生态极其庞大与成熟，插件与加载器几乎覆盖所有极其复杂的打包场景。	生态快速成长，基于 Rollup 插件接口，兼容大部分 Rollup 插件与 Vite 专属插件。
优势区间	复杂大型企业级应用、老旧项目维护、微前端 (Module Federation)。	现代通用前端项目（Vue/React）、中小型应用、快速原型开发。

Rspack vs Turbopack 综合对比矩阵

对比维度	Rspack	Turbopack
主导团队与背景	字节跳动 (ByteDance) (旨在解决巨型企业级 Webpack 项目打包慢问题)	Vercel (由 Webpack 原作者 Tobias Koppers 主导) (旨在构建下一代现代化全栈应用的理想 Bundler)
核心机制与原理	兼容式 Rust 增量打包采用 Rust 重构了 Webpack 的依赖图（Graph）与架构，保留了标准的打包/分包流程，依靠 Rust 多线程并行与 SWC 加速。	函数级增量计算 Engine (Turbo Engine) 将打包全流程拆解为纯函数并建立缓存图。配合按需编译（On-demand Compilation），仅编译当前请求的路由模块。
对 Webpack 的优化点	1. 语言级替换：用 Rust 替代 Node.js，消除单线程与 GC 瓶颈 2. 架构级兼容：实现 Rust 版 Tapable 钩子系统 3. 开箱即用：内置 SWC、CSS 提取、Minifier，无需繁琐 Loader	1. 计算级优化：Turbo Engine 实现细粒度函数级缓存，避免重复计算 2. 按需编译：开发模式下无需分析全量依赖图，按路由动态编译 3. 下一代架构：针对 React Server Components (RSC) 深度优化
核心优势 (Pros)	1. Webpack 生态无缝迁移：配置/架构高度兼容，迁移成本极低 2. 独立性与通用性强：不绑定特定框架，纯前端/微前端场景均适用 3. 模块联邦 (Module Federation)：原生内置深度支持	1. 毫秒级冷启动与 HMR：依赖增量缓存与按需编译，热更新体验极佳 2. Next.js 深度集成：与 Next.js 框架无缝融合，零配置开箱即用 3. 强大的磁盘缓存：持久化文件系统缓存，服务重启近乎 0 毫秒
核心劣势 (Cons)	1. 传统 Webpack 插件仍需通过 JS 桥接运行，过于偏门的插件可能存在兼容问题 2. 上层现代化生态（如 Rsbuild/Rslib）仍在快速迭代中	1. 框架捆绑度高：目前高度绑定 Next.js 生态，脱离 Next.js 使用门槛高 2. 不兼容传统 Webpack 插件：无法直接运行传统的 JS 插件
优势区间 / 选型建议	大型 Webpack 老旧项目迁移 / 复杂微前端架构已有项目存在大量 Webpack 配置，且需要保留原有的打包逻辑与分包策略。	Next.js 全栈应用 / 现代化 React 生态项目使用 Next.js (App Router) 进行全新项目开发，追求极致的开发热更新体验与现代化 Server Components 场景。

优化手段与适用场景

优化维度	Webpack	Rspack 的优化策略	Turbopack 的优化策略
语言开销	Node.js 单线程 / 有 GC	Rust 多线程并行，彻底消除 GC 停顿	Rust 多线程并行，高效内存管理
开发编译范围	分析全量依赖树或部分 Cache	Rust 极速全量/增量构建	极致按需编译（仅编译当前访问页面/路由）
缓存粒度	模块级 / 磁盘文件缓存	模块级 & 多线程并行缓存	函数级增量计算（Turbo Engine 纯函数缓存树）
编译/压缩链	依赖外置 Babel / Terser	内置 SWC 完成转译与压缩	内置 SWC 完成转译与压缩

总结

Webpack 是一个功能强大且灵活的前端打包工具，它通过构建依赖图和模块打包来优化前端资源的加载和性能。通过合理配置 Loader 和 Plugin，开发者可以处理各种类型的文件，并实现代码分割、压缩和优化。随着前端技术的发展，Rspack 和 Turbopack 等新兴工具也在不断涌现，为开发者提供了更多选择。理解 Webpack 的核心原理和使用方法，对于提升前端开发效率和应用性能具有重要意义。