---

一、基礎核心

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