Devtool (開發工具)

此選項控制 Source Map 的生成方式和是否生成。

使用 SourceMapDevToolPlugin 可以進行更精細的配置。請參閱 source-map-loader 來處理現有的 Source Map。

devtool

string = 'eval' false

選擇一種Source Map 樣式來增強除錯過程。這些值會顯著影響構建和重新構建的速度。

devtool (開發工具)	performance (效能)	生產環境	質量	註釋
(無)	構建：最快 重新構建：最快	是	bundle	對於效能最大化的生產構建的推薦選擇。
eval	構建：快 重新構建：最快	否	生成的	對於效能最大化的開發構建的推薦選擇。
eval-cheap-source-map	構建：良好 重新構建：快	否	轉換後的	開發構建的權衡選擇。
eval-cheap-module-source-map	構建：慢 重新構建：快	否	原始行	開發構建的權衡選擇。
eval-source-map	構建：最慢 重新構建：良好	否	原始	對於高質量 SourceMap 的開發構建的推薦選擇。
cheap-source-map	構建：良好 重新構建：慢	否	轉換後的	-
cheap-module-source-map	構建：慢 重新構建：慢	否	原始行	-
source-map	構建：最慢 重新構建：最慢	是	原始	對於高質量 SourceMap 的生產構建的推薦選擇。
inline-cheap-source-map	構建：良好 重新構建：慢	否	轉換後的	-
inline-cheap-module-source-map	構建：慢 重新構建：慢	否	原始行	-
inline-source-map	構建：最慢 重新構建：最慢	否	原始	釋出單個檔案時的可能選擇
eval-nosources-cheap-source-map	構建：良好 重新構建：快	否	轉換後的	不包含原始碼
eval-nosources-cheap-module-source-map	構建：慢 重新構建：快	否	原始行	不包含原始碼
eval-nosources-source-map	構建：最慢 重新構建：良好	否	原始	不包含原始碼
inline-nosources-cheap-source-map	構建：良好 重新構建：慢	否	轉換後的	不包含原始碼
inline-nosources-cheap-module-source-map	構建：慢 重新構建：慢	否	原始行	不包含原始碼
inline-nosources-source-map	構建：最慢 重新構建：最慢	否	原始	不包含原始碼
nosources-cheap-source-map	構建：良好 重新構建：慢	否	轉換後的	不包含原始碼
nosources-cheap-module-source-map	構建：慢 重新構建：慢	否	原始行	不包含原始碼
nosources-source-map	構建：最慢 重新構建：最慢	是	原始	不包含原始碼
hidden-nosources-cheap-source-map	構建：良好 重新構建：慢	否	轉換後的	無引用，不包含原始碼
hidden-nosources-cheap-module-source-map	構建：慢 重新構建：慢	否	原始行	無引用，不包含原始碼
hidden-nosources-source-map	構建：最慢 重新構建：最慢	是	原始	無引用，不包含原始碼
hidden-cheap-source-map	構建：良好 重新構建：慢	否	轉換後的	無引用
hidden-cheap-module-source-map	構建：慢 重新構建：慢	否	原始行	無引用
hidden-source-map	構建：最慢 重新構建：最慢	是	原始	無引用。僅用於錯誤報告時可能選擇 SourceMap。

快捷方式	解釋
效能：構建	devtool 設定如何影響初始構建的效能？
效能：重新構建	devtool 設定如何影響增量構建的效能？慢速的 devtool 可能會降低 watch 模式下的開發反饋迴圈。與構建效能相比，其規模不同，因為人們期望重新構建比構建更快。
生產環境	是否適合在生產構建中使用此 devtool？當 devtool 對使用者體驗產生負面影響時，通常為 no。
質量：打包	你將看到一個大塊程式碼中所有生成的程式碼。這是沒有任何 devtool 支援的原始輸出檔案。
質量：生成的	你將看到生成的程式碼，但每個模組在瀏覽器 devtools 中都顯示為單獨的程式碼檔案。
質量：轉換後的	你將看到經過 loader 預處理但未經過額外 webpack 轉換的程式碼。只有源行將被對映，列資訊將被丟棄或不生成。這會阻止在行中間設定斷點，因為這與程式碼最小化器不相容。
質量：原始行	你將看到你編寫的原始程式碼，假設所有 loader 都支援 SourceMapping。只有源行將被對映，列資訊將被丟棄或不生成。這會阻止在行中間設定斷點，因為這與程式碼最小化器不相容。
質量：原始	你將看到你編寫的原始程式碼，假設所有 loader 都支援 SourceMapping。
eval-* 新增	為每個模組生成 SourceMap 並透過 eval 附加。建議用於開發，因為其重新構建效能得到提升。請注意，Windows Defender 可能存在問題，導致病毒掃描造成嚴重減速。
inline-* 新增	將 SourceMap 內聯到原始檔案中，而不是建立單獨的檔案。
hidden-* 新增	未新增 SourceMap 的引用。當 SourceMap 未部署，但仍應生成時，例如用於錯誤報告目的。
nosources-* 新增	SourceMap 中不包含原始碼。這在需要引用原始檔案時很有用（需要更多配置選項）。

其中一些值適合開發，另一些則適合生產。對於開發，你通常希望以打包大小為代價獲得快速的 Source Map，而對於生產，你則需要精確且支援最小化的獨立 Source Map。

質量

bundled code - 你將看到所有生成的程式碼作為一大塊程式碼。你不會看到模組相互分離。

generated code - 你會看到每個模組彼此分離，並帶有模組名稱的註釋。你會看到 webpack 生成的程式碼。例如：你看到的是 var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a(); 而不是 import {test} from "module"; test();。

transformed code - 你會看到每個模組彼此分離，並帶有模組名稱的註釋。你會看到 webpack 轉換之前的程式碼，但已經是 Loader 轉譯之後的程式碼。例如：你看到的是 import {test} from "module"; var A = function(_test) { ... }(test); 而不是 import {test} from "module"; class A extends test {}

original source - 你會看到每個模組彼此分離，並帶有模組名稱的註釋。你會看到轉譯之前的程式碼，即你編寫的程式碼。這取決於 Loader 的支援。

without source content - Source Map 中不包含源內容。瀏覽器通常會嘗試從 Web 伺服器或檔案系統載入原始檔。你必須確保正確設定 output.devtoolModuleFilenameTemplate 以匹配源 URL。

(lines only) - Source Map 被簡化為每行一個對映。這通常意味著每個語句一個對映（假設你以這種方式編寫程式碼）。這會阻止你除錯語句級別的執行，以及在行的列上設定斷點。與最小化器結合使用是不可能的，因為最小化器通常只發射一行。

開發

以下選項是開發環境的理想選擇

eval - 每個模組都使用 eval() 和 //# sourceURL 執行。這非常快。主要缺點是它無法正確顯示行號，因為它被對映到轉譯後的程式碼而不是原始程式碼（沒有來自 Loader 的 Source Map）。

eval-source-map - 每個模組都使用 eval() 執行，並且 SourceMap 以 DataUrl 的形式新增到 eval() 中。它最初速度較慢，但提供了快速的重新構建速度並生成真實檔案。行號被正確對映，因為它被對映到原始程式碼。它為開發提供了最高質量的 SourceMap。

eval-cheap-source-map - 類似於 eval-source-map，每個模組都使用 eval() 執行。它“便宜”是因為它沒有列對映，只對映行號。它忽略來自 Loader 的 SourceMap，並且只顯示類似於 eval devtool 的轉譯程式碼。

eval-cheap-module-source-map - 類似於 eval-cheap-source-map，但是，在這種情況下，來自 Loader 的 Source Map 會被處理以獲得更好的結果。然而，Loader Source Map 被簡化為每行一個對映。

特殊情況

以下選項既不適合開發也不適合生產。它們適用於某些特殊情況，即某些第三方工具。

inline-source-map - SourceMap 以 DataUrl 的形式新增到打包檔案中。

cheap-source-map - 不帶列對映的 SourceMap，忽略 loader Source Map。

inline-cheap-source-map - 類似於 cheap-source-map，但 SourceMap 以 DataUrl 的形式新增到打包檔案中。

cheap-module-source-map - 不帶列對映的 SourceMap，將 loader Source Map 簡化為每行一個對映。

inline-cheap-module-source-map - 類似於 cheap-module-source-map，但 SourceMap 以 DataUrl 的形式新增到打包檔案中。

生產

這些選項通常用於生產環境

(none) (省略 devtool 選項或設定 devtool: false) - 不會發射 SourceMap。這是一個很好的開始選項。

source-map - 會發射完整的 SourceMap 作為單獨的檔案。它會向打包檔案新增一個引用註釋，以便開發工具知道在哪裡可以找到它。

hidden-source-map - 與 source-map 相同，但不向打包檔案新增引用註釋。如果你只希望 SourceMap 用於對映錯誤報告中的錯誤堆疊跟蹤，但不想將 SourceMap 暴露給瀏覽器開發工具，則此選項很有用。

nosources-source-map - 建立的 SourceMap 中不包含 sourcesContent。它可以用於在客戶端上對映堆疊跟蹤，而無需暴露所有原始碼。你可以將 Source Map 檔案部署到 Web 伺服器。