CC 4.0 授權

本節內容衍生自以下連結的內容，並受 CC BY 4.0 授權條款約束。
https://webpack.dev.org.tw/configuration/devtool/
如果未特別說明，以下內容可以視為在原始內容的基礎上進行修改和刪除的結果。

Devtool

devtool 設定用於控制 Source Map 生成的行為。

類型

export type Devtool =
  | false
  | 'eval'
  | 'cheap-source-map'
  | 'cheap-module-source-map'
  | 'source-map'
  | 'inline-cheap-source-map'
  | 'inline-cheap-module-source-map'
  | 'inline-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'
  | 'eval-cheap-source-map'
  | 'eval-cheap-module-source-map'
  | 'eval-source-map'
  | 'eval-nosources-cheap-source-map'
  | 'eval-nosources-cheap-module-source-map'
  | 'eval-nosources-source-map';

預設值： eval

Source Map 生成行為的主要類型有 source-map、eval、cheap、module、inline、nosources 和 hidden，它們可以組合使用。

source-map 是最基本的行為，表示生成 Source Map，當啟用 Source Map 時，會對建置效能產生部分負擔。
eval 使用 eval() 包裝模組產生的程式碼，因此 Rspack 可以在內部快取模組產生的結果，因此當 eval 與 source-map 結合使用時，可以最佳化重建時 Source Map 的生成速度。
cheap 表示 Source Map 將只會生成行的映射，忽略列的映射，以加快 Source Map 的生成速度。
module 用於控制載入器是否需要回傳 Source Map，因此沒有 module，Source Map 只能映射將被載入器處理的程式碼，並且由於載入器不需要處理 Source Map，因此 Source Map 的生成速度會提高。
inline 表示是否通過資料 URL 將生成的 Source Map 內聯到檔案末尾。
nosources 用於控制生成的 Source Map 是否包含原始程式碼內容，以減少生成的 Source Map 的大小。
hidden 用於控制生成的檔案末尾是否包含 # sourceMappingURL=... 註釋。瀏覽器開發工具和 VS Code 等會通過此註釋的路徑或資料 URL 尋找 Source Map，以便在除錯期間將產品的行號映射回其在原始程式碼中的位置。

Devtool#

Devtool