開發人員工具
此選項控制是否以及如何產生原始碼對應表。
使用 SourceMapDevToolPlugin 以取得更細緻的設定。參閱 source-map-loader 以處理現有的原始碼對應表。
devtool
字串 = 'eval' false
選擇 原始碼對應 的樣式以增強偵錯程序。這些值可能會大幅影響建置和重建速度。
| devtool | 效能 | 生產 | 品質 | 註解 |
|---|---|---|---|---|
| (無) | 建置：最快 重新建置：最快 | 是 | 套件 | 建議用於生產建置，以獲得最佳效能。 |
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 可能會在監控模式中減少開發回饋迴圈。與建置效能相比，規模不同，因為預期重新建置會比建置快。 |
| 生產 | 使用此開發工具進行生產建置是否有意義？當開發工具對使用者體驗造成負面影響時，通常為否。 |
| 品質：已組合 | 您會在單一程式碼區段中看到區塊的所有已產生程式碼。這是沒有任何開發工具支援的原始輸出檔案 |
| 品質：已產生 | 您會看到已產生的程式碼，但每個模組會在瀏覽器開發工具中顯示為獨立的程式碼檔案。 |
| 品質：已轉換 | 您會在載入器預處理後但 webpack 額外轉換前看到已產生的程式碼。只會對原始程式碼行進行對應，且欄位資訊會被捨棄或不產生。這會防止在程式碼行中間設定中斷點，而這與最小化程式碼無關。 |
| 品質：原始程式碼行 | 您會看到您編寫的原始程式碼，假設所有載入器都支援 SourceMapping。只會對原始程式碼行進行對應，且欄位資訊會被捨棄或不產生。這會防止在程式碼行中間設定中斷點，而這與最小化程式碼無關。 |
| 品質：原始 | 您會看到您編寫的原始程式碼，假設所有載入器都支援 SourceMapping。 |
eval-* 附加 | 針對每個模組產生 SourceMap，並透過 eval 附加。建議用於開發，因為改善了重新建置效能。請注意，Windows Defender 有個問題，會因為防毒掃描而導致大幅度變慢。 |
inline-* 附加 | 將 SourceMap 內嵌到原始檔案，而不是建立獨立的檔案。 |
hidden-* 附加 | 沒有新增任何 SourceMap 參考。當 SourceMap 沒有部署，但仍應產生時，例如用於錯誤回報目的。 |
nosources-* 附加 | 原始碼未包含在 SourceMap 中。當需要參照原始檔案時，這項功能會很有用（需要進一步的設定選項）。 |
其中一些值適合開發，而另一些值適合生產。在開發過程中，你通常希望以犧牲套件大小為代價來取得快速的 Source Map，但在生產過程中，你希望取得精確且支援最小化的獨立 Source Map。
品質
已套件化程式碼 - 你會看到所有已產生的程式碼，就像一大團程式碼。你不會看到各個模組彼此分開。
已產生的程式碼 - 你會看到每個模組彼此分開，並附有模組名稱註解。你會看到 webpack 所產生的程式碼。範例：你會看到類似 var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a(); 的程式碼，而不是 import {test} from "module"; test();。
已轉換程式碼 - 你會看到每個模組彼此分開，並附有模組名稱註解。你會看到 webpack 轉換程式碼之前的程式碼，但載入器已將其轉譯。範例：你會看到類似 import {test} from "module"; var A = function(_test) { ... }(test); 的程式碼，而不是 import {test} from "module"; class A extends test {}。
原始程式碼 - 你會看到每個模組彼此分開，並附有模組名稱註解。你會看到轉譯之前的程式碼，就像你撰寫的那樣。這取決於載入器的支援。
沒有原始程式碼內容 - Source Map 中不包含原始程式碼的內容。瀏覽器通常會嘗試從網路伺服器或檔案系統載入原始程式碼。你必須確保正確設定 output.devtoolModuleFilenameTemplate 以符合原始程式碼網址。
（僅限行） - Source Map 已簡化為每行一個對應。這通常表示每一個陳述式對應一個對應（假設你以這種方式撰寫）。這會讓你無法在陳述式層級進行除錯，也無法在行的欄位上設定中斷點。無法與最小化結合使用，因為最小化器通常只會產生一行。
開發
以下選項適合開發
eval - 每個模組都使用 eval() 和 //# sourceURL 執行。這相當快速。主要缺點是它無法正確顯示行號，因為它會對應到轉譯後的程式碼，而不是原始程式碼（載入器沒有來源對應）。
eval-source-map - 每個模組都使用 eval() 執行，並將來源對應新增為 eval() 的 DataUrl。一開始很慢，但它提供快速的重新建置速度並產生真實檔案。行號正確對應，因為它會對應到原始程式碼。它產生開發時品質最佳的來源對應。
eval-cheap-source-map - 類似於 eval-source-map，每個模組都使用 eval() 執行。它之所以「便宜」，是因為它沒有欄位對應，它只對應行號。它會忽略載入器的來源對應，只顯示類似於 eval devtool 的轉譯後程式碼。
eval-cheap-module-source-map - 類似於 eval-cheap-source-map，不過，這種情況下會處理載入器的來源對應以獲得更好的結果。但是，載入器來源對應會簡化為每行一個對應。
特殊情況
以下選項不適合開發或生產。它們是某些特殊情況下需要的，例如某些第三方工具。
inline-source-map - 將來源對應新增為套件的 DataUrl。
cheap-source-map - 沒有欄位對應的來源對應，會忽略載入器來源對應。
inline-cheap-source-map - 類似於 cheap-source-map，但來源對應會新增為套件的 DataUrl。
cheap-module-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 - 會建立一個不包含 sourcesContent 的 SourceMap。它可以用於對應客戶端的堆疊追蹤，而不會公開所有原始碼。你可以將 Source Map 檔案部署到 Web 伺服器。
8 貢獻者
