Webpack DefinePlugin 在打包时做了什么，和运行时环境变量有什么区别？
围绕“Webpack DefinePlugin 在打包时做了什么，和运行时环境变量有什么区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明编译期文本替换的本质及与 process.env 运行时读取的差异，不讲 mode 与环境配置管理。
核心关键词webpack DefinePlugin 环境变量 编译时替换
面试知识索引 · 分类、标签与搜索
前端工程化面试题，138 道完整答案
前端工程化面试题第 3 页，显示第 101–138 题，共找到 138 道完整解析，可继续按分类、标签与关键词缩小范围。
138筛选结果
52技术分类
178检索标签
3索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 3 页
本页面试问题
按稳定语义路径排序
- 0101
- 0102
Webpack 的依赖图是如何从入口开始构建的，它对输出有什么决定作用？
围绕“Webpack 的依赖图是如何从入口开始构建的，它对输出有什么决定作用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答从 entry 递归解析 import/require 生成模块图的过程。
核心关键词webpack 依赖图 dependency graph - 0103
如何组织 Webpack 配置以共用公共部分并区分开发与生产环境？
围绕“如何组织 Webpack 配置以共用公共部分并区分开发与生产环境”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖给出公共配置与 webpack-merge 拆分的环境组织方式，不讲具体环境优化项。
核心关键词webpack 配置合并 webpack-merge 环境区分 - 0104
Webpack devtool 各取值（eval、cheap、source-map）在构建速度和调试质量上如何取舍？
围绕“Webpack devtool 各取值（eval、cheap、source-map）在构建速度和调试质量上如何取舍”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要对比生成/重建速度与映射精度，为开发与生产分别给结论，不讲 SourceMap 文件格式。
核心关键词webpack devtool source map 选择 - 0105
如何发现并解决 Webpack 产物中同一依赖被打包多份的问题？
围绕“如何发现并解决 Webpack 产物中同一依赖被打包多份的问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕用 stats/analyzer 定位多版本依赖并通过 alias 或依赖升级归一，不讲分包策略。
核心关键词webpack 重复依赖 打包多份 排查 - 0106
Webpack 中动态 import() 是如何触发按需加载的，产物形态有什么变化？
围绕“Webpack 中动态 import() 是如何触发按需加载的，产物形态有什么变化”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释异步 chunk 生成与运行时加载（jsonp/chunk loading）流程，不讲预加载提示。
核心关键词webpack 动态 import 按需加载 chunk - 0107
Webpack 的 entry 配置支持哪些形式，多入口和单入口的产物有何区别？
围绕“Webpack 的 entry 配置支持哪些形式，多入口和单入口的产物有何区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖区分 string、数组、对象形式的 entry 及其对 chunk 生成的影响，不讲 output 的 hash 策略。
核心关键词webpack entry 配置 多入口 - 0108
Webpack externals 的作用是什么，和 code splitting 解决的问题有何不同？
围绕“Webpack externals 的作用是什么，和 code splitting 解决的问题有何不同”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖区分不打包改由运行时全局变量/CDN 提供与拆分后仍由 webpack 加载两种路径，不讲库开发场景。
核心关键词webpack externals 外部扩展 CDN - 0109
Webpack HMR 热模块替换在构建与运行时层面分别做了什么？
围绕“Webpack HMR 热模块替换在构建与运行时层面分别做了什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明增量编译产物与运行时模块替换、accept 回调的流程，不讲框架级 fast refresh。
核心关键词webpack HMR 热更新 原理 - 0110
HtmlWebpackPlugin 解决了什么问题，它如何自动注入带 hash 的产物？
围绕“HtmlWebpackPlugin 解决了什么问题，它如何自动注入带 hash 的产物”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释 HTML 生成与 chunk 引用注入的时机。
核心关键词webpack HtmlWebpackPlugin 注入 hash - 0111
Webpack 5 的 innerGraph 优化相比基础 tree shaking 多解决了什么问题？
围绕“Webpack 5 的 innerGraph 优化相比基础 tree shaking 多解决了什么问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释跨语句的使用跟踪（如类方法、立即赋值的导出）带来的更精细摇树，不讲配置开关细节。
核心关键词webpack5 innerGraph tree shaking 优化 - 0112
用 Webpack 实现路由级懒加载时，如何控制生成的 chunk 名称与加载失败处理？
围绕“用 Webpack 实现路由级懒加载时，如何控制生成的 chunk 名称与加载失败处理”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要讲清 webpackChunkName 注释与加载错误兜底思路，不讲框架路由配置本身。
核心关键词webpack 懒加载 chunk 名称 webpackChunkName - 0113
Webpack rule.enforce 的 pre 和 post 有什么作用，能解决什么问题？
围绕“Webpack rule.enforce 的 pre 和 post 有什么作用，能解决什么问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 pre/normal/post 三类 loader 的分层与排序优先级。
核心关键词webpack rule enforce pre post loader - 0114
Webpack 多个 loader 的执行顺序是怎样的，为什么 babel-loader 要写在最后？
围绕“Webpack 多个 loader 的执行顺序是怎样的，为什么 babel-loader 要写在最后”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答 loader 从右到左（normal 阶段）及 pitching 阶段的顺序规则，不讲如何编写自定义 loader。
核心关键词webpack loader 执行顺序 pitch - 0115
Webpack loader 的 pitching 阶段是什么，什么场景下会跳过剩余 loader？
围绕“Webpack loader 的 pitching 阶段是什么，什么场景下会跳过剩余 loader”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释 pitch 函数前置执行与提前返回短路后续 loader 的机制，不讲 inline loader 语法细节。
核心关键词webpack loader pitching 阶段 - 0116
Webpack 中 loader 和 plugin 的职责边界是什么，同一需求应如何判断用哪个？
围绕“Webpack 中 loader 和 plugin 的职责边界是什么，同一需求应如何判断用哪个”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖按模块转换与构建流程扩展划分职责，给出判断标准，不罗列常见插件清单。
核心关键词webpack loader plugin 区别 职责 - 0117
Webpack 的 mode 设置为 development 和 production 分别默认开启了哪些优化？
围绕“Webpack 的 mode 设置为 development 和 production 分别默认开启了哪些优化”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕列举两种模式默认开启的插件与优化项差异，不讲自定义 mode 配置。
核心关键词webpack mode development production 默认优化 - 0118
Webpack 的 moduleIds 和 chunkIds 配置为什么会影响产物 hash 的稳定性？
围绕“Webpack 的 moduleIds 和 chunkIds 配置为什么会影响产物 hash 的稳定性”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释 deterministic ID 如何避免新增模块导致无关 chunk 哈希变化，不讲哈希算法选择。
核心关键词webpack moduleIds chunkIds deterministic 稳定 hash - 0119
Webpack output.filename 中 [name]、[contenthash]、[chunkhash] 各自代表什么，何时该用哪个？
围绕“Webpack output.filename 中 [name]、[contenthash]、[chunkhash]”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明三种替代标记的生成依据与缓存意义。
核心关键词webpack output filename contenthash chunkhash - 0120
Webpack 5 的 filesystem 持久化缓存缓存了什么，什么情况下会自动失效？
围绕“Webpack 5 的 filesystem 持久化缓存缓存了什么，什么情况下会自动失效”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明构建中间结果落盘与基于文件快照的失效机制，不讲 loader 自身缓存。
核心关键词webpack5 cache filesystem 持久化缓存 - 0121
Webpack plugin 是如何通过 compiler 和 compilation 钩子介入构建过程的？
围绕“Webpack plugin 是如何通过 compiler 和 compilation 钩子介入构建过程的”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答基于 Tapable 的钩子注册与生命周期介入机制，不讲具体某个插件的用法。
核心关键词webpack plugin 原理 compiler compilation 钩子 - 0122
Webpack 中 webpackPrefetch 和 webpackPreload 魔法注释分别产生什么效果？
围绕“Webpack 中 webpackPrefetch 和 webpackPreload 魔法注释分别产生什么效果”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖区分浏览器空闲预取与并行预载的优先级差异及资源提示生成，不讲动态 import 机制本身。
核心关键词webpack prefetch preload 魔法注释 - 0123
Webpack ProvidePlugin 适合解决什么问题，为什么能免去重复 import？
围绕“Webpack ProvidePlugin 适合解决什么问题，为什么能免去重复 import”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明模块标识符自动注入的机制与适用场景，不对比 externals。
核心关键词webpack ProvidePlugin 自动加载模块 - 0124
Webpack output.publicPath 决定什么，设置为自动值或 CDN 地址各有什么影响？
围绕“Webpack output.publicPath 决定什么，设置为自动值或 CDN 地址各有什么影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明运行时资源 URL 拼接的依据及按需 chunk 加载失败与 publicPath 的关系，不讲 devServer 的同名配置。
核心关键词webpack publicPath 配置 静态资源路径 - 0125
什么情况下应该用 Webpack 的 asset/source 类型而不是普通打包？
围绕“什么情况下应该用 Webpack 的 asset/source 类型而不是普通打包”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖判断需要原样字符串内容（如 shader、SVG 源码）的场景。
核心关键词webpack asset/source 原样引入文件 - 0126
Webpack resolve.alias 能解决哪些实际问题，配置时有什么容易踩的坑？
围绕“Webpack resolve.alias 能解决哪些实际问题，配置时有什么容易踩的坑”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要讲清路径简化与模块替换两类用途及后缀/精确匹配陷阱，不讲解析性能。
核心关键词webpack resolve alias 路径别名 - 0127
Webpack resolve 的 extensions、alias、modules 配置如何影响构建速度？
围绕“Webpack resolve 的 extensions、alias、modules 配置如何影响构建速度”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明解析请求数量与文件系统探测开销的关系，不讲 alias 的业务用法。
核心关键词webpack resolve alias extensions 性能 - 0128
Webpack optimization.runtimeChunk 抽离的运行时代码包含什么，为什么要单独成包？
围绕“Webpack optimization.runtimeChunk 抽离的运行时代码包含什么，为什么要单独成包”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释模块清单与 chunk 加载逻辑抽离对缓存稳定性的价值，不讲长效缓存整体方案。
核心关键词webpack runtimeChunk 运行时代码 抽离 - 0129
package.json 的 sideEffects 字段如何影响 Webpack 的 tree shaking 结果？
围绕“package.json 的 sideEffects 字段如何影响 Webpack 的 tree shaking 结”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明副作用标记对模块保留/删除的决定作用及误配风险，不讲压缩器层面优化。
核心关键词webpack sideEffects 字段 tree shaking - 0130
生产环境想用 SourceMap 排查线上问题又不泄露源码，Webpack 应如何配置？
围绕“生产环境想用 SourceMap 排查线上问题又不泄露源码，Webpack 应如何配置”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要比较 hidden-source-map、nosources-source-map 与独立上传方案，不讲 devtool 全表。
核心关键词webpack 生产环境 source map 安全 hidden-source-map - 0131
Webpack SplitChunksPlugin 的 chunks、minSize、cacheGroups 各控制什么？
围绕“Webpack SplitChunksPlugin 的 chunks、minSize、cacheGroups 各控制”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要讲清清抽取范围、体积门槛与缓存组优先级三个决策点，不讲具体业务分包方案设计。
核心关键词webpack splitChunks cacheGroups minSize 配置 - 0132
Webpack 5 生产模式默认的 splitChunks 行为会拆出什么样的公共包？
围绕“Webpack 5 生产模式默认的 splitChunks 行为会拆出什么样的公共包”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明默认 cacheGroups（vendors/default）与 20KB 等默认条件，不讲自定义组配置。
核心关键词webpack5 默认 splitChunks 行为 - 0133
Webpack 的 stats 输出（--json）包含哪些信息，如何用它做产物诊断？
围绕“Webpack 的 stats 输出（--json）包含哪些信息，如何用它做产物诊断”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释 modules/chunks/assets/reasons 字段能回答的诊断问题，不依赖具体可视化工具。
核心关键词webpack stats json 产物分析 - 0134
Webpack tree shaking 标记了未使用导出后，最终删除代码依赖哪个环节？
围绕“Webpack tree shaking 标记了未使用导出后，最终删除代码依赖哪个环节”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖区分 optimization 标记与压缩器死代码消除两阶段职责，不讲 sideEffects 字段。
核心关键词webpack tree shaking TerserPlugin 删除死代码 - 0135
为什么配置了 production 模式后 Webpack 打包仍有未使用的导出没有被移除？
围绕“为什么配置了 production 模式后 Webpack 打包仍有未使用的导出没有被移除”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖给出 Babel 转译破坏 ESM、副作用标记缺失、导出被整体引用等排查方向，不讲压缩配置。
核心关键词webpack tree shaking 不生效 排查 - 0136
Webpack tree shaking 依赖 ES Module 的什么特性，为什么 CommonJS 难以摇树？
围绕“Webpack tree shaking 依赖 ES Module 的什么特性，为什么 CommonJS 难以摇树”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答静态结构分析与 usedExports/副作用标记，不讲具体 sideEffects 配置写法。
核心关键词webpack tree shaking 原理 ESM CommonJS - 0137
设计 Webpack 第三方库分包策略时，按 node_modules 整体拆和按包拆各有什么利弊？
围绕“设计 Webpack 第三方库分包策略时，按 node_modules 整体拆和按包拆各有什么利弊”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕权衡请求数量、缓存命中率与长缓存稳定性。
核心关键词webpack vendor 分包策略 node_modules 拆分 - 0138
编写一个 Webpack 自定义插件的基本结构是什么，apply 方法里能做什么？
围绕“编写一个 Webpack 自定义插件的基本结构是什么，apply 方法里能做什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖给出插件类结构与在 emit 等钩子中操作 assets 的思路，不深入到 loader 编写。
核心关键词webpack 自定义插件 编写 apply