webpack 面试基础知识速览

一、面试先说结论

1. webpack 解决了什么

把模块、样式、图片等资源纳入统一依赖图，做构建、优化和产物管理。

2. webpack 的定位

通用前端打包平台，不只是打包器，更是可扩展的构建运行时。

3. 什么时候还会选 webpack

多端复杂工程、历史包袱重、需要深度定制 loader/plugin 的场景。

二、五大核心速答

1. entry

构建入口，决定依赖图起点。

2. output

定义产物路径、命名规则和资源公共路径。

3. loader

把非 JS 资源转为模块可处理内容，本质是转换器。

4. plugin

介入编译生命周期，做能力扩展与优化。

5. mode

development 偏调试，production 偏优化与压缩。

三、高频原理题

1. 构建流程

初始化参数 -> 编译模块 -> 生成 chunk -> 输出 assets。

2. HMR 原理

通过 websocket 通知更新，增量替换模块并尽量保留运行状态。

3. Tree Shaking 前提

ESM 静态结构 + 生产模式 + 正确 sideEffects 配置。

4. 代码分割价值

降低首屏包体积，提高缓存命中，提升二次访问体验。

四、性能优化答案模板

1. 提升构建速度

缩小 loader 处理范围、开启缓存、并行构建、减少重复编译。

2. 降低打包体积

拆分公共依赖、按需加载、删除无用 polyfill、压缩图片和代码。

3. 优化长期缓存

使用内容哈希（contenthash）并避免公共 chunk 频繁抖动。

五、面试追问点

1. loader 和 plugin 区别

loader 关注“文件转换”；plugin 关注“流程扩展”。

2. source map 如何选

开发常用 eval-cheap-module-source-map，生产按安全与定位精度权衡。

3. Module Federation 是什么

让多个应用在运行时共享模块，适合微前端与大型平台化项目。

30 秒口述模板

我会把「webpack」分成三层来讲：先讲核心概念和它解决的问题，再讲一个高频场景与实现思路，最后补充常见坑点和优化方向。这样既能回答基础问题，也能接住面试官追问。

2 分钟口述模板

如果展开讲，我会按“定义 -> 原理 -> 场景 -> 取舍”四步回答。先说明「webpack」解决的核心问题和边界；再讲 1 到 2 个关键机制，解释为什么这样设计；然后结合一个真实业务场景说明如何落地；最后补充常见坑点、性能或稳定性优化，以及与相近方案的取舍标准。

这样回答的好处是：既有原理深度，也有工程落地感，面试官继续追问到实现细节时也能自然展开。