解鎖webpack核心技能（二）：配置文件和devtool配置指南

一、配置文件

webpack 提供的 cli 支持很多的參數，例如 --mode 。在我們平時的開發過程中，我們要學習很多的功能，這些很多都是可以用參數來完成的。那么后邊就會導致參數越來越多，我們使用命令特別的不方便，所以我們會使用一種更加靈活的方式---配置文件。

1. webpack 配置文件

1) 配置文件的基本使用

默認情況下，webpack 會讀取 webpack.config.js 文件作為配置文件，但也可以通過 cli 參數 --config 來指定某個配置文件，例如 npx wenpack --config abc.js。

2）配置文件的編寫規范

導出方式：必須使用 CommonJS 模塊規范導出配置對象，即 module.exports = {...} 。不能使用 ES6 的 export default 語法，會導致 webpack 無法識別配置。
配置優先級：當命令行參數與配置文件沖突時，命令行參數優先級更高

3）常見配置屬性

學習 webpack 簡單的來說就是學習配置文件有哪些東西可以配置。有了配置文件就可以在配置文件配置屬性，而不需要再在命令行配置了。

mode：編譯模式，字符串，取值為 development 或 production ，指定編譯結果代碼運行的環境，會影響 webpack 對編譯結果代碼格式的處理
entry：入口文件配置，字符串，指定打包的起點
output：出口配置，對象，指定打包結果的文件名和路徑，指定編譯結果文件

4）配置文件注意事項

配置文件中的代碼必須是有效的 Node.js 代碼，而且自定義配置文件路徑必須正確，否則會報 MODULE_NOT_FOUND 錯誤。

webpack 支持多模塊化，為什么配置文件里邊只能用 commonjs 導出，而不能用 ES6 呢？

webpack 支持多模塊化指的是它在構建依賴關系的時候，無論用 commonjs 還是 es6 它都能識別到。為什么在配置文件里邊識別不了是因為 webpack 在打包過程中或說是在編譯過程中，它是在 node 環境，在這個編譯的過程它要讀取配置文件的內容，而 nodejs 原生支持 CommonJS。

5）配置文件與源代碼的關系

打包結果獨立性：dist 目錄產物完全獨立，不依賴原始配置文件，可脫離項目目錄單獨運行打包結果。
關鍵區別：

- 配置文件：參與打包過程執行，決定打包行為
- 源代碼：僅提供內容素材，不影響打包過程本身

2. 配置文件的基本配置

1）mode

配置方式：可通過CLI參數--mode或配置文件設置，推薦使用配置文件
優先級規則：當命令行參數與配置文件沖突時，以命令行參數為準
可選值：

- development：開發環境，代碼不壓縮
- production：生產環境，代碼會進行優化壓縮

實踐技巧：可在package.json中配置不同腳本，如"dev": "webpack"和"build": "webpack --mode=production"

2）entry

默認值：./src/index.js
修改方式：在配置文件中通過entry屬性指定
路徑規則：需使用相對路徑，從配置文件所在目錄開始計算
注意事項：修改入口文件后需確保文件存在，否則會報錯Can't resolve './src'
成功打包后生成對應的輸出文件

3）output

默認輸出：./dist/main.js
配置結構：output是一個對象，包含多個配置屬性
常用屬性：

- filename：指定輸出文件名

保留機制：修改輸出文件名后，舊文件不會被自動刪除

3. 配置文件的總結

a. 1）配置文件的運行環境

參與打包過程：配置文件在打包過程中會參與運行，其導出的結果將影響整個打包流程。
Node環境要求：由于運行環境是Node環境，因此配置文件中參與打包過程運行的代碼必須是Node代碼。

b. 2）源代碼處理機制

源代碼讀取方式：webpack通過入口文件讀取源代碼，但僅分析代碼內容而不執行。
模塊化兼容性：源代碼中可以使用任意模塊化規范（如CommonJS/ES Module等），因為webpack只進行依賴分析。

c. 3）打包過程與運行時的區別

錯誤發生時機：

- 打包階段：不會執行源代碼，因此語法錯誤不會導致打包失敗（如a.abc()調用null值）
- 運行階段：打包后的代碼在瀏覽器/Node環境執行時才會暴露運行時錯誤

配置文件特殊性：與源代碼不同，配置文件中的代碼會在打包時立即執行，因此必須保證語法正確。

二、devtool配置

1. source map源碼地圖

前端開發中源代碼經過合并、壓縮、轉換后運行，導致報錯時難以定位原始代碼位置。source map僅解決調試問題，與webpack無關，是獨立技術。其核心功能是將轉換后代碼映射回源代碼，不影響實際運行結果。source map 無兼容性問題，因為調試僅面向開發者（使用現代瀏覽器），普通用戶不會觸發調試功能。