---
id: frontend.webpack.build-optimization
title: webpack 5：loader 与 plugin、splitChunks、tree shaking、缓存、模块联邦
type: lesson
domain: frontend
stack: [webpack]
tags: [webpack, loader, plugin, splitChunks, tree shaking, contenthash, 持久化缓存, Module Federation]
level: intermediate
prerequisites: []
est_hours: 2.5
related: [frontend.vite.dev-build-config, frontend.webpack.scenario.build-speed, frontend.webpack.interview]
week: [7]
order: 1
---

# webpack 5：loader 与 plugin、splitChunks、tree shaking、缓存、模块联邦

> 基于 webpack 5.112 + webpack-cli 7 编写并实际构建验证。很多公司的存量项目仍在用 webpack，面试也常问原理。以官方文档为准：https://webpack.js.org/concepts/ 。

## 解释说明

### 核心概念

| 概念 | 一句话 |
| --- | --- |
| entry | 从哪里开始分析依赖 |
| output | 产物放在哪里、叫什么名字 |
| **loader** | 把非 JS 文件（或需要转换的 JS）**转换**成 JS 模块；从右到左（从下到上）链式执行 |
| **plugin** | 在编译**生命周期的钩子**上做事（生成 HTML、压缩、提取 CSS、分析体积），基于 tapable 事件机制 |
| chunk | 打包过程中的代码块；入口、动态 `import()`、`splitChunks` 都会产生 chunk |
| mode | `development` / `production`，决定默认优化项 |

### 构建流程（面试常问）

初始化参数 → 创建 Compiler → 从 entry 开始，对每个模块调用匹配的 loader 转换 → 解析出依赖，递归构建模块依赖图 → 根据入口和拆包规则组装 chunk → 生成代码写入 output。过程中在各个阶段触发钩子，plugin 在钩子上执行。

### 优化手段

- **tree shaking**：依赖 ES 模块的静态结构，`usedExports` 标记未使用的导出，压缩时删除；`package.json` 的 `sideEffects` 声明哪些文件有副作用（如 CSS），其余可以整体删除。
- **splitChunks**：提取公共代码和第三方库；`runtimeChunk: "single"` 把运行时单独拆出。
- **contenthash**：文件名随内容变化，配合 CDN 长期缓存。
- **持久化缓存**：`cache: { type: "filesystem" }`，第二次构建明显变快。
- **构建提速**：缩小 loader 的处理范围（`include` / `exclude`）、用 swc / esbuild 类 loader 代替 babel、多进程、减少不必要的 source map。
- **Module Federation（模块联邦）**：多个独立构建的应用在运行时共享模块，用于微前端。

## 案例

一个主站和后台两个入口共享工具函数：通过 `splitChunks` 提取出 `shared`，运行时拆出 `runtime`，报表模块用动态 `import()` 按需加载。

## 代码示例

完整项目：[examples/webpack-config](examples/webpack-config/)，`npm install && npm run build` 输出：

```text
[size] runtime.981552ae.js                  2.74 KiB
[size] main.38cd14b7.js                     0.33 KiB
[size] 531.30ecc347.js                      0.21 KiB     ← 动态 import 的 report.js
[size] admin.e2a620fd.js                    0.20 KiB
[size] shared.5f4a3ab4.js                   0.18 KiB     ← 两个入口共用的 utils.js
Entrypoint main 3.25 KiB = runtime + shared + main
Entrypoint admin 3.12 KiB = runtime + shared + admin
```

已验证：`utils.js` 中未被使用的 `unusedHelper` 在产物中搜索不到（tree shaking 生效）。

自定义 loader（[loaders/md-loader.cjs](examples/webpack-config/loaders/md-loader.cjs)）：

```js
module.exports = function mdLoader(source) {
  const { trim = false } = this.getOptions();
  const text = trim ? source.trim() : source;
  return `export default ${JSON.stringify(text)};`;
};
```

自定义 plugin（[webpack.config.js](examples/webpack-config/webpack.config.js)）：

```js
class SizeReportPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("SizeReportPlugin", (stats) => {
      const assets = stats.toJson({ all: false, assets: true }).assets ?? [];
      for (const a of assets) console.log(`[size] ${a.name} ${(a.size / 1024).toFixed(2)} KiB`);
    });
  }
}
```

## 易错点

- 混淆 loader 和 plugin 的职责。
- loader 的执行顺序写反（`use: ["style-loader", "css-loader"]` 中 css-loader 先执行）。
- 用了 CommonJS（`require` / `module.exports`）导致 tree shaking 失效；`sideEffects: false` 配置错误导致 CSS 被删掉。
- 用 `[hash]` 而不是 `[contenthash]`，每次构建所有文件名都变，缓存失效。
- 生产环境开启了暴露源码的 source map 并公开访问。

## 面试常问

- loader 和 plugin 的区别？写过吗？
- webpack 的构建流程？
- tree shaking 的原理和失效原因？
- 怎么优化构建速度和产物体积？