前端面试中Webpack配置常考问题有哪些？

Webpack 配置中那些常被考到的核心问题

在前端工程师的面试过程中，Webpack 作为现代前端工程化的基石工具，其配置相关的问题几乎是必考内容，无论是基础配置、优化策略，还是底层原理，面试官都可能通过这些问题考察候选人的工程化能力。前端面试中 Webpack 配置常考的问题有哪些？ 本文将为你梳理核心考点，助你高效备考。

基础配置类问题

入口（entry）与输出（output）如何配置？
- 入口文件可以是单文件、多文件（数组或对象形式），需结合项目结构说明使用场景。
- 输出配置需明确 filename（输出文件名）、path（输出目录）、publicPath（资源引用路径）等关键字段的作用。
Loader 和 Plugin 的区别是什么？
- Loader：用于转换特定类型的文件（如 babel-loader 处理 JS，css-loader 处理 CSS），是模块级别的转换工具。
- Plugin：用于扩展 Webpack 功能（如 HtmlWebpackPlugin 生成 HTML 文件，MiniCssExtractPlugin 提取 CSS），通常作用于整个构建生命周期。
如何配置 Babel 处理 ES6+ 语法？
- 需安装 @babel/core、babel-loader 及预设（如 @babel/preset-env），并在 Webpack 配置中通过 module.rules 指定规则。

如何减少打包体积？
- 代码分割：通过 splitChunks 配置拆分公共代码，或使用动态导入（import()）实现按需加载。
- Tree Shaking：启用 mode: 'production' 自动移除未使用的代码，或通过 sideEffects 配置优化。
- 压缩资源：使用 TerserPlugin 压缩 JS，CssMinimizerPlugin 压缩 CSS。
如何提升构建速度？
- 缓存：利用 cache-loader 或 babel-loader 的 cacheDirectory 选项缓存中间结果。
- 多线程/并行：通过 thread-loader 或 parallel-webpack 加速构建。
- 缩小构建范围：排除 node_modules，或使用 externals 配置将第三方库从打包中移除。
如何配置 Webpack 实现持久化缓存？
- 使用 output.filename 中的 [contenthash] 生成唯一哈希，结合 CleanWebpackPlugin 清理旧文件。

如何实现开发环境与生产环境的不同配置？
- 通过 webpack-merge 合并公共配置与环境特定配置，或使用 mode 参数自动启用优化选项（如生产环境默认压缩代码）。
Source Map 的作用是什么？如何配置？
- Source Map 用于映射打包后的代码与源代码，便于调试，可通过 devtool 配置选择类型（如 cheap-module-source-map 适合开发环境）。
Webpack 的构建流程是怎样的？
- 核心流程包括：初始化参数 → 开始编译 → 编译模块 → 完成模块编译 → 输出资源 → 输出完成，需理解 compiler 和 compilation 对象的角色。

如何配置 Webpack 处理图片、字体等静态资源？
- 使用 file-loader 或 url-loader（可设置资源内联的阈值），或通过 asset modules（Webpack 5+ 原生支持）简化配置。
如何解决跨域问题？
- 开发环境可通过 devServer.proxy 配置代理，或使用 webpack-dev-server 的 headers 添加 CORS 头。
如何实现微前端架构中的 Webpack 配置？
- 需关注模块联邦（Module Federation）的使用，通过 shared 配置共享依赖，避免重复打包。