01

60 秒回答模板

Webpack 的打包主线是从 entry 出发读取入口模块，解析 import/require 等依赖，递归构建模块依赖图。每个资源会按规则经过 loader 转换成可纳入依赖图的模块，Webpack 再做模块合并、代码分割、tree shaking、压缩等优化，最终生成一个或多个 chunk 和 bundle。浏览器运行时由 Webpack runtime 负责模块缓存、模块执行、异步 chunk 加载和热更新等能力。

考点 核心机制与工程取舍
难度 中高频面试题
回答目标 按定义、机制、场景讲清楚
02

深入解析

01

入口和依赖图

entry 是构建起点。Webpack 读取入口文件后解析 AST，找到静态 import、动态 import 和 CommonJS require，再递归解析依赖，形成 module graph。

02

资源统一成模块

JS 可以直接解析，CSS、字体、TS、Less 等资源需要 loader 转换。loader 的目标是把不同资源转成 Webpack 能理解和串联的模块代码或资源描述。

03

chunk 的形成

依赖图构建完成后，Webpack 根据入口、动态 import、splitChunks 等规则把模块分组为 chunk。chunk 是构建中的代码块，最终可能对应一个或多个输出文件。

04

优化阶段

优化包括 tree shaking 删除未使用导出、scope hoisting 合并模块包装、压缩混淆、公共依赖拆分、资源 hash 命名和运行时代码抽离。优化依赖模块格式和副作用标记是否准确。

05

运行时代码

打包产物不仅是业务模块，还包含 runtime。runtime 维护模块 id 到模块函数的映射、模块缓存、__webpack_require__ 执行逻辑，以及异步 chunk 的加载和回调。

06

工程取舍

打包不是越少文件越好。HTTP/2、缓存命中、首屏体积、异步路由、公共依赖变化频率都会影响拆包策略。回答时要从构建过程延伸到线上加载体验。

03

易错点

  • 不要把打包说成简单文件拼接。核心是依赖图构建、资源转换、chunk 生成和 runtime 执行模型。
  • 不要混淆 chunk 和 bundle。chunk 是构建分组，bundle 是输出产物的常用称呼。
  • 不要漏掉 runtime。模块缓存、异步加载和 HMR 都依赖运行时代码。
  • 不要认为 Webpack 只能处理 JS。CSS、字体等资源通过 loader 也会进入模块系统。
04

面试官追问

module、chunk、bundle 有什么区别？

module 是源码或资源转换后的单个模块；chunk 是一组模块的构建分组；bundle 通常指最终输出到磁盘、被浏览器加载的文件。

动态 import 会发生什么？

动态 import 通常形成异步 chunk。运行时执行到该语句时加载对应文件，加载完成后再执行模块并返回 Promise。

tree shaking 为什么有时不生效？

常见原因是使用 CommonJS 难以静态分析、包声明了副作用、Babel 转换破坏 ESM 结构，或代码本身确实有可观察副作用。

contenthash 的作用是什么？

让文件名随内容变化而变化。内容不变的资源可以长期缓存，内容变化时文件名变化，浏览器会请求新资源。