前端知识库webpack 面试基础知识速览
把模块、样式、图片等资源纳入统一依赖图，做构建、优化和产物管理。（深入阅读：Webpack 的核心能力）
webpack 面试基础知识速览
一、面试先说结论
1. webpack 解决了什么
把模块、样式、图片等资源纳入统一依赖图，做构建、优化和产物管理。（深入阅读：Webpack 的核心能力）
2. webpack 的定位
通用前端打包平台，不只是打包器，更是可扩展的构建运行时。（深入阅读：模块图与构建运行时）
3. 什么时候还会选 webpack
多端复杂工程、历史包袱重、需要深度定制 loader/plugin 的场景。（深入阅读：webpack 与 Vite 的选型）
二、五大核心速答
1. entry
构建入口，决定依赖图起点。（深入阅读：Webpack 构建流程）
2. output
定义产物路径、命名规则和资源公共路径。（深入阅读：文件指纹与产物命名）
3. loader
把非 JS 资源转为模块可处理内容，本质是转换器。（深入阅读：Loader 的工作方式）
4. plugin
介入编译生命周期，做能力扩展与优化。（深入阅读：Plugin 的工作方式）
5. mode
development 偏调试，production 偏优化与压缩。（深入阅读：mode 配置）
三、高频原理题
1. 构建流程
初始化参数 -> 编译模块 -> 生成 chunk -> 输出 assets。（深入阅读：Webpack 构建流程）
2. HMR 原理
通过 websocket 通知更新，增量替换模块并尽量保留运行状态。（深入阅读：HMR 完整流程）
3. Tree Shaking 前提
ESM 静态结构 + 生产模式 + 正确 sideEffects 配置。（深入阅读：Tree Shaking 的前提）
4. 代码分割价值
降低首屏包体积，提高缓存命中，提升二次访问体验。（深入阅读：代码分割）
四、性能优化答案模板
1. 提升构建速度
缩小 loader 处理范围、开启缓存、并行构建、减少重复编译。（深入阅读：构建速度优化）
2. 降低打包体积
拆分公共依赖、按需加载、删除无用 polyfill、压缩图片和代码。（深入阅读：构建与体积优化）
3. 优化长期缓存
使用内容哈希（contenthash）并避免公共 chunk 频繁抖动。（深入阅读：文件指纹与缓存策略）
五、面试追问点
1. loader 和 plugin 区别
loader 关注“文件转换”；plugin 关注“流程扩展”。（深入阅读：Loader 与 Plugin 的区别）
2. source map 如何选
开发常用 eval-cheap-module-source-map，生产按安全与定位精度权衡。（深入阅读：Source Map 的生产方案）
3. Module Federation 是什么
让多个应用在运行时共享模块，适合微前端与大型平台化项目。（深入阅读：Module Federation）
30 秒口述模板
我会把「webpack」分成三层来讲：先讲核心概念和它解决的问题，再讲一个高频场景与实现思路，最后补充常见坑点和优化方向。这样既能回答基础问题，也能接住面试官追问。
2 分钟口述模板
如果展开讲，我会按“定义 -> 原理 -> 场景 -> 取舍”四步回答。先说明「webpack」解决的核心问题和边界；再讲 1 到 2 个关键机制，解释为什么这样设计；然后结合一个真实业务场景说明如何落地；最后补充常见坑点、性能或稳定性优化，以及与相近方案的取舍标准。
这样回答的好处是：既有原理深度，也有工程落地感，面试官继续追问到实现细节时也能自然展开。