webpack面试问题

一、核心概念

1. Webpack的构建流程是什么？

   • 答案：
     1. 初始化：读取配置，创建Compiler对象
     2. 编译：从入口文件开始，递归分析依赖关系，生成依赖图
     3. 模块处理：调用Loader转换模块（如babel-loader）
     4. 输出：将处理后的模块组合成Chunk，生成最终文件

2. Loader和Plugin的区别？

   • Loader：文件加载器（转换非JS文件，如.less → .css）
   • Plugin：扩展Webpack功能（如生成HTML文件、压缩代码）
   • 关键区别：Loader处理单个文件，Plugin作用于整个构建流程

---

二、配置与优化

3. 如何实现代码分割（Code Splitting）？

   • 答案：

     optimization: {splitChunks: {chunks: 'all', // 分离node_modules和公共模块cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name: 'vendors'}}}
     }
     

4. Tree Shaking生效的条件？

   • 必要条件：
     1. 使用ES6模块语法（import/export）
     2. 生产模式（mode: 'production'）
     3. 在package.json中配置"sideEffects": false

---

三、性能优化

5. 如何优化Webpack构建速度？

   • 高频策略：
     • 缓存：