webpack 高频追问 Q&A

1. Q: Loader 和 Plugin 本质区别？

A: Loader 处理模块内容转换，Plugin 介入构建生命周期做扩展。（深入阅读：Loader 和 Plugin 的区别、编写 Loader 与 Plugin）

2. Q: HMR 为什么能只更新局部？

A: 模块热替换基于依赖图定位变更边界并推送更新。（深入阅读：webpack 热更新原理）

3. Q: Tree Shaking 依赖什么前提？

A: ESM 静态结构和 production 模式优化。（深入阅读：代码分割与 Tree Shaking、webpack 面试进阶详解：Tree Shaking）

4. Q: 构建慢怎么排查？

A: 先看耗时插件/loader，再看缓存、并行和拆分策略。（深入阅读：优化 webpack 构建速度、bundle 体积监控与分析）

5. Q: 为什么还在用 webpack？

A: 历史项目深度定制多、生态兼容成熟、迁移成本高。（深入阅读：webpack 基础知识速览、webpack 与 Vite 选型）

6. Q: `Compiler` 和 `Compilation` 有什么区别？

A: Compiler 管整个构建器的生命周期，Compilation 表示某一次构建的模块、Chunk 和 assets。插件通常从 Compiler 进入，再在具体 Compilation 上读取或修改本次构建数据。（深入阅读：webpack 构建流程、编写 Plugin 的思路）

7. Q: HMR 为什么有时会整页刷新？

A: 更新链路上没有可接受的 HMR 边界，或运行时判断模块无法安全替换，就会回退刷新；还要检查 WebSocket、更新 manifest/chunk 和 Loader 的 HMR 支持。（深入阅读：webpack 热更新原理、文件监听原理）

8. Q: `sideEffects: false` 可以随便加吗？

A: 不可以。含全局样式、Polyfill、注册行为或导入即执行逻辑的模块不能被当作无副作用模块，否则 Tree Shaking 可能删除必需代码。（深入阅读：webpack 面试进阶详解：sideEffects、代码分割与 Tree Shaking）

9. Q: `hash`、`chunkhash` 和 `contenthash` 怎么选？

A: hash 反映整个构建，chunkhash 反映 Chunk，contenthash 反映单个资源内容。长期缓存的 JS/CSS 通常优先 contenthash。（深入阅读：文件指纹的原理与使用）

10. Q: DevServer Proxy 为什么能解决本地跨域？

A: 浏览器只请求同源的开发服务器，由服务器进程再转发到目标 API；浏览器同源策略不会限制这段服务器到服务器的转发，但它不替代生产 CORS、鉴权或 CSRF 配置。（深入阅读：[webpack proxy 工作原理](/工程化/webpack/04-说说webpack proxy工作原理？为什么能解决跨域？)）

11. Q: 生产环境为什么不能无条件公开 Source Map？

A: 完整 Source Map 可能暴露源码和构建路径。应按错误监控需求选择受限方案，控制 .map 访问，并保证产物与映射文件版本一致。（深入阅读：Source Map 原理与选型）