前端工程化 · Webpack面试题第 1 页，显示第 1–45 题，共找到 45 道完整解析，可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
Webpack 5 的 asset modules 有哪几种类型，如何替代 file-loader 和 url-loader？ 本文先给出可直接复述的结论，再用最小代码说明webpack5 asset modules asset/resource asset/inline的工作方式、判断依据、项目边界和常见误区。
Webpack babel-loader 的 cacheDirectory 选项如何提升二次构建速度？ 本文先给出可直接复述的结论，再用最小代码说明webpack babel-loader cacheDirectory 缓存的工作方式、判断依据、项目边界和常见误区。
Webpack 官方建议的构建性能优化手段有哪些，应按什么顺序排查？ 本文先给出可直接复述的结论，再用最小代码说明webpack 构建性能优化手段 排查顺序的工作方式、判断依据、项目边界和常见误区。
发现 Webpack 产物体积异常增大，如何用 webpack-bundle-analyzer 定位问题？ 本文先给出可直接复述的结论，再用最小代码说明webpack bundle analyzer 体积分析的工作方式、判断依据、项目边界和常见误区。
如何利用 Webpack 的 contenthash 与 runtime chunk 实现稳定的长效缓存？ 本文先给出可直接复述的结论，再用最小代码说明webpack 长效缓存 contenthash runtimeChunk的工作方式、判断依据、项目边界和常见误区。
Webpack 实现代码分割有哪几种方式，各自适合什么场景？ 本文先给出可直接复述的结论，再用最小代码说明webpack 代码分割 code splitting 方式的工作方式、判断依据、项目边界和常见误区。
Webpack 中 css-loader 和 style-loader 各自负责什么，为什么生产环境要换成 MiniCssExtractPlugin？ 本文先给出可直接复述的结论，再用最小代码说明webpack css-loader style-loader MiniCssExtractPlugin 区别的工作方式、判断依据、项目边界和常见误区。
Webpack DefinePlugin 在打包时做了什么，和运行时环境变量有什么区别？ 本文先给出可直接复述的结论，再用最小代码说明webpack DefinePlugin 环境变量 编译时替换的工作方式、判断依据、项目边界和常见误区。
Webpack 的依赖图是如何从入口开始构建的，它对输出有什么决定作用？ 本文先给出可直接复述的结论，再用最小代码说明webpack 依赖图 dependency graph的工作方式、判断依据、项目边界和常见误区。
如何组织 Webpack 配置以共用公共部分并区分开发与生产环境？ 本文先给出可直接复述的结论，再用最小代码说明webpack 配置合并 webpack-merge 环境区分的工作方式、判断依据、项目边界和常见误区。
Webpack devtool 各取值（eval、cheap、source-map）在构建速度和调试质量上如何取舍？ 本文先给出可直接复述的结论，再用最小代码说明webpack devtool source map 选择的工作方式、判断依据、项目边界和常见误区。
如何发现并解决 Webpack 产物中同一依赖被打包多份的问题？ 本文先给出可直接复述的结论，再用最小代码说明webpack 重复依赖 打包多份 排查的工作方式、判断依据、项目边界和常见误区。
Webpack 中动态 import() 是如何触发按需加载的，产物形态有什么变化？ 本文先给出可直接复述的结论，再用最小代码说明webpack 动态 import 按需加载 chunk的工作方式、判断依据、项目边界和常见误区。
Webpack 的 entry 配置支持哪些形式，多入口和单入口的产物有何区别？ 本文先给出可直接复述的结论，再用最小代码说明webpack entry 配置 多入口的工作方式、判断依据、项目边界和常见误区。
Webpack externals 的作用是什么，和 code splitting 解决的问题有何不同？ 本文先给出可直接复述的结论，再用最小代码说明webpack externals 外部扩展 CDN的工作方式、判断依据、项目边界和常见误区。
Webpack HMR 热模块替换在构建与运行时层面分别做了什么？ 本文先给出可直接复述的结论，再用最小代码说明webpack HMR 热更新 原理的工作方式、判断依据、项目边界和常见误区。
HtmlWebpackPlugin 解决了什么问题，它如何自动注入带 hash 的产物？ 本文先给出可直接复述的结论，再用最小代码说明webpack HtmlWebpackPlugin 注入 hash的工作方式、判断依据、项目边界和常见误区。
Webpack 5 的 innerGraph 优化相比基础 tree shaking 多解决了什么问题？ 本文先给出可直接复述的结论，再用最小代码说明webpack5 innerGraph tree shaking 优化的工作方式、判断依据、项目边界和常见误区。
用 Webpack 实现路由级懒加载时，如何控制生成的 chunk 名称与加载失败处理？ 本文先给出可直接复述的结论，再用最小代码说明webpack 懒加载 chunk 名称 webpackChunkName的工作方式、判断依据、项目边界和常见误区。
Webpack rule.enforce 的 pre 和 post 有什么作用，能解决什么问题？ 本文先给出可直接复述的结论，再用最小代码说明webpack rule enforce pre post loader的工作方式、判断依据、项目边界和常见误区。
Webpack 多个 loader 的执行顺序是怎样的，为什么 babel-loader 要写在最后？ 本文先给出可直接复述的结论，再用最小代码说明webpack loader 执行顺序 pitch的工作方式、判断依据、项目边界和常见误区。
Webpack loader 的 pitching 阶段是什么，什么场景下会跳过剩余 loader？ 本文先给出可直接复述的结论，再用最小代码说明webpack loader pitching 阶段的工作方式、判断依据、项目边界和常见误区。
Webpack 中 loader 和 plugin 的职责边界是什么，同一需求应如何判断用哪个？ 本文先给出可直接复述的结论，再用最小代码说明webpack loader plugin 区别 职责的工作方式、判断依据、项目边界和常见误区。
Webpack 的 mode 设置为 development 和 production 分别默认开启了哪些优化？ 本文先给出可直接复述的结论，再用最小代码说明webpack mode development production 默认优化的工作方式、判断依据、项目边界和常见误区。
Webpack 的 moduleIds 和 chunkIds 配置为什么会影响产物 hash 的稳定性？ 本文先给出可直接复述的结论，再用最小代码说明webpack moduleIds chunkIds deterministic 稳定 hash的工作方式、判断依据、项目边界和常见误区。
Webpack output.filename 中 [name]、[contenthash]、[chunkhash] 各自代表什么，何时该用哪个？ 本文先给出可直接复述的结论，再用最小代码说明webpack output filename contenthash chunkhash的工作方式、判断依据、项目边界和常见误区。
Webpack 5 的 filesystem 持久化缓存缓存了什么，什么情况下会自动失效？ 本文先给出可直接复述的结论，再用最小代码说明webpack5 cache filesystem 持久化缓存的工作方式、判断依据、项目边界和常见误区。
Webpack plugin 是如何通过 compiler 和 compilation 钩子介入构建过程的？ 本文先给出可直接复述的结论，再用最小代码说明webpack plugin 原理 compiler compilation 钩子的工作方式、判断依据、项目边界和常见误区。
Webpack 中 webpackPrefetch 和 webpackPreload 魔法注释分别产生什么效果？ 本文先给出可直接复述的结论，再用最小代码说明webpack prefetch preload 魔法注释的工作方式、判断依据、项目边界和常见误区。
Webpack ProvidePlugin 适合解决什么问题，为什么能免去重复 import？ 本文先给出可直接复述的结论，再用最小代码说明webpack ProvidePlugin 自动加载模块的工作方式、判断依据、项目边界和常见误区。
Webpack output.publicPath 决定什么，设置为自动值或 CDN 地址各有什么影响？ 本文先给出可直接复述的结论，再用最小代码说明webpack publicPath 配置 静态资源路径的工作方式、判断依据、项目边界和常见误区。
什么情况下应该用 Webpack 的 asset/source 类型而不是普通打包？ 本文先给出可直接复述的结论，再用最小代码说明webpack asset/source 原样引入文件的工作方式、判断依据、项目边界和常见误区。
Webpack resolve.alias 能解决哪些实际问题，配置时有什么容易踩的坑？ 本文先给出可直接复述的结论，再用最小代码说明webpack resolve alias 路径别名的工作方式、判断依据、项目边界和常见误区。
Webpack resolve 的 extensions、alias、modules 配置如何影响构建速度？ 本文先给出可直接复述的结论，再用最小代码说明webpack resolve alias extensions 性能的工作方式、判断依据、项目边界和常见误区。
Webpack optimization.runtimeChunk 抽离的运行时代码包含什么，为什么要单独成包？ 本文先给出可直接复述的结论，再用最小代码说明webpack runtimeChunk 运行时代码 抽离的工作方式、判断依据、项目边界和常见误区。
package.json 的 sideEffects 字段如何影响 Webpack 的 tree shaking 结果？ 本文先给出可直接复述的结论，再用最小代码说明webpack sideEffects 字段 tree shaking的工作方式、判断依据、项目边界和常见误区。
生产环境想用 SourceMap 排查线上问题又不泄露源码，Webpack 应如何配置？ 本文先给出可直接复述的结论，再用最小代码说明webpack 生产环境 source map 安全 hidden-source-map的工作方式、判断依据、项目边界和常见误区。
Webpack SplitChunksPlugin 的 chunks、minSize、cacheGroups 各控制什么？ 本文先给出可直接复述的结论，再用最小代码说明webpack splitChunks cacheGroups minSize 配置的工作方式、判断依据、项目边界和常见误区。
Webpack 5 生产模式默认的 splitChunks 行为会拆出什么样的公共包？ 本文先给出可直接复述的结论，再用最小代码说明webpack5 默认 splitChunks 行为的工作方式、判断依据、项目边界和常见误区。
Webpack 的 stats 输出（--json）包含哪些信息，如何用它做产物诊断？ 本文先给出可直接复述的结论，再用最小代码说明webpack stats json 产物分析的工作方式、判断依据、项目边界和常见误区。
Webpack tree shaking 标记了未使用导出后，最终删除代码依赖哪个环节？ 本文先给出可直接复述的结论，再用最小代码说明webpack tree shaking TerserPlugin 删除死代码的工作方式、判断依据、项目边界和常见误区。
为什么配置了 production 模式后 Webpack 打包仍有未使用的导出没有被移除？ 本文先给出可直接复述的结论，再用最小代码说明webpack tree shaking 不生效 排查的工作方式、判断依据、项目边界和常见误区。
Webpack tree shaking 依赖 ES Module 的什么特性，为什么 CommonJS 难以摇树？ 本文先给出可直接复述的结论，再用最小代码说明webpack tree shaking 原理 ESM CommonJS的工作方式、判断依据、项目边界和常见误区。
设计 Webpack 第三方库分包策略时，按 node_modules 整体拆和按包拆各有什么利弊？ 本文先给出可直接复述的结论，再用最小代码说明webpack vendor 分包策略 node_modules 拆分的工作方式、判断依据、项目边界和常见误区。
编写一个 Webpack 自定义插件的基本结构是什么，apply 方法里能做什么？ 本文先给出可直接复述的结论，再用最小代码说明webpack 自定义插件 编写 apply的工作方式、判断依据、项目边界和常见误区。
