---
id: frontend.webpack.index
title: webpack
type: index
domain: frontend
stack: [webpack]
tags: [webpack, 构建工具, 性能优化]
week: [7]
---

# webpack

存量项目和面试中仍然很常见：loader 与 plugin、构建流程、tree shaking、拆包和缓存、构建提速。

## 学习路线

| 顺序 | 课程 | 级别 | 预计 |
| --- | --- | --- | --- |
| 1 | [webpack 5：loader 与 plugin、splitChunks、tree shaking、缓存、模块联邦](01-build-optimization.md) | 进阶 | 2.5 小时 |

## 企业场景

- [大型项目构建慢、包体积大：度量、优化和防退化](scenarios/build-speed.md)

## 面试题

- [webpack 面试题](interview.md)

## 示例代码

- [examples/webpack-config](examples/webpack-config/)：双入口 + `splitChunks` 提取公共代码 + 动态导入 + 自定义 loader 和 plugin（`npm run build` 已验证，未使用的导出被删除）

## 在 16 周计划中

- [第 7 周：前端工程化查漏](../../../plan/week07-frontend.md)

## 官方资料

- https://webpack.js.org/concepts/