大厂前端研发岗位设计的30道Webpack面试题及解析

一、基础核心

Webpack的核心概念是什么？
解析：入口(entry)、输出(output)、加载器(loader)、插件(plugins)、模式(mode)。Loader处理非JS文件，Plugin扩展功能。
Loader和Plugin的区别？
解析：
- Loader：文件转换器（如.scss → .css）
- Plugin：生命周期钩子中执行任务（如打包优化、资源注入）
如何实现一个简单的Loader？
解析：导出一个函数，接收源码，返回处理结果：
js 复制代码
```
module.exports = function(source) {
  return source.replace('foo', 'bar');
};
```

二、配置进阶

如何配置多入口文件？
解析：

js 复制代码

entry: {
  app: './src/app.js',
  admin: './src/admin.js'
}

如何动态生成HTML文件并注入资源？
解析：使用html-webpack-plugin，自动注入打包后的JS/CSS。
开发环境 vs 生产环境配置差异
解析：
- 开发：devtool: 'eval-source-map'、mode: 'development'、热更新
- 生产：代码压缩、资源优化、mode: 'production'

三、性能优化

代码分割（Code Splitting）的三种方式
解析：
1. 入口分割：entry多入口
2. 动态导入：import('./module')
3. 配置分割：optimization.splitChunks
如何压缩JS/CSS？
解析：
- JS：TerserWebpackPlugin（Webpack5内置）
- CSS：CssMinimizerWebpackPlugin
Tree Shaking生效的条件？
解析：
- 使用ES6模块语法（import/export）
- 生产模式（mode: 'production'）
- 无副作用声明（package.json中设置"sideEffects": false）
如何提升构建速度？
解析：
- 缓存：cache: { type: 'filesystem' }
- 多线程：thread-loader
- 减少范围：exclude: /node_modules/

四、Loader原理

如何实现图片自动转Base64？
解析：配置url-loader：
js 复制代码
```
{
  loader: 'url-loader',
  options: { limit: 8192 } // <8KB的图转Base64
}
```
CSS如何实现模块化？
解析：css-loader开启modules选项：
js 复制代码
```
{ loader: 'css-loader', options: { modules: true } }
```
如何编译SASS并添加浏览器前缀？
解析：链式Loader：
js 复制代码
```
['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
```
postcss-loader需配合postcss-preset-env插件。

五、Plugin机制

Plugin的工作原理是什么？
解析：基于Tapable事件流，在编译生命周期（如compile、emit）挂载任务。

写一个统计打包耗时的Plugin
解析：

js 复制代码

class TimePlugin {
  apply(compiler) {
    compiler.hooks.beforeRun.tap('Time', () => this.start = Date.now());
    compiler.hooks.done.tap('Time', () => console.log(`耗时: ${Date.now() - this.start}ms`));
  }
}

如何删除打包后的注释？
解析：使用TerserWebpackPlugin配置extractComments: false

六、高级应用

如何配置Webpack Dev Server代理？
解析：

js 复制代码

devServer: {
  proxy: {
    '/api': 'http://localhost:3000' // 代理API请求
  }
}

模块热替换（HMR）原理是什么？
解析：
1. 建立WebSocket连接（实时通信）
2. 文件变动时重新编译模块
3. 通过JSON消息通知客户端替换模块
如何打包SVG图标为雪碧图？
解析：svg-sprite-loader + 配置symbolId: 'icon-[name]'

七、工程化实战

如何集成Babel？
解析：
js 复制代码
```
{
  test: /\.js$/,
  use: ['babel-loader'],
  exclude: /node_modules/
}
```
配合.babelrc配置presets（如@babel/preset-env）。
如何分析打包体积？
解析：
- webpack-bundle-analyzer可视化分析
- 命令行：npx webpack --profile --json > stats.json生成报告
如何兼容旧浏览器？
解析：
- Babel转译ES6+语法
- core-js提供Polyfill
- CSS前缀通过autoprefixer添加

八、原理深挖

Webpack的构建流程是怎样的？
解析：

初始化 → 编译（分析依赖） → 生成Chunk → 输出文件（emit）
Chunk和Bundle的区别？
解析：
- Chunk：代码块（如入口chunk、异步chunk）
- Bundle：Chunk经过编译和打包后的最终文件

Loader的执行顺序？
解析：从右到左，从下到上：

js 复制代码

use: ['style-loader', 'css-loader', 'sass-loader'] 
// 执行顺序：sass → css → style

九、异常处理

Source Map的作用？如何选择类型？
解析：映射编译后代码到源码。开发用eval-cheap-source-map（快），生产用hidden-source-map（安全）。
如何处理第三方库的兼容问题？
解析：
- 使用resolve.alias重定向库路径
- 配置externals排除不打包的库（如CDN引入）
- @babel/plugin-transform-runtime避免重复注入Polyfill

十、综合场景

如何实现按需加载Ant Design组件？
解析：

js 复制代码

// babel.config.js
plugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]]

SSR项目如何配置Webpack？
解析：
- 双配置：webpack.client.js + webpack.server.js
- 服务端配置：target: 'node'、externals排除Node模块
- 客户端配置：入口为hydration脚本
微前端场景如何隔离子应用Webpack？
解析：
- 主应用：配置ModuleFederationPlugin暴露共享模块
- 子应用：配置ModuleFederationPlugin引入共享模块，避免重复打包
- 关键字段：name, filename, exposes, remotes, shared