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

一、基础核心

1. Webpack的核心概念是什么？
   解析：入口(entry)、输出(output)、加载器(loader)、插件(plugins)、模式(mode)。Loader处理非JS文件，Plugin扩展功能。

2. Loader和Plugin的区别？
   解析：

   • Loader：文件转换器（如.scss → .css）
   • Plugin：生命周期钩子中执行任务（如打包优化、资源注入）

3. 如何实现一个简单的Loader？
   解析：导出一个函数，接收源码，返回处理结果：

   module.exports = function(source) {return source.replace('foo', 'bar');
   };
   

二、配置进阶

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

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

5. 如何动态生成HTML文件并注入资源？
   解析：使用html-webpack-plugin，自动注入打包后的JS/CSS。

6. 开发环境 vs 生产环境配置差异
   解析：

   • 开发：devtool: 'eval-source-map'、mode: 'development'、热更新
   • 生产：代码压缩、资源优化、mode: 'production'

三、性能优化

7. 代码分割（Code Splitting）的三种方式
   解析：

   1. 入口分割：entry多入口
   2. 动态导入：import('./module')
   3. 配置分割：optimization.splitChunks

8. 如何压缩JS/CSS？
   解析：

   • JS：TerserWebpackP