一、核心概念

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構建速度？

   • 高頻策略：
     • 緩存：