SourceMapDevToolPlugin#

此外掛程式可更精細地控制原始碼地圖的產生。它也會藉由 devtool 設定選項的某些設定自動啟用。

new rspack.SourceMapDevToolPlugin(options);

選項#

test#

• 類型： string RegExp [string, RegExp]

根據模組的副檔名（預設為 .js、.mjs 和 .css）包含原始碼地圖。

include#

• 類型： string RegExp [string, RegExp]

針對符合指定值的模組路徑包含原始碼地圖。

exclude#

• 類型： string RegExp [string, RegExp]

從原始碼地圖產生中排除符合指定值的模組。

filename#

• 類型： string

定義原始碼地圖的輸出檔名（如果未提供任何值，則會內聯）。

append#

• 類型： string function

將給定值附加到原始資產。通常是 #sourceMappingURL 註解。 [url] 會被取代為原始碼地圖檔案的 URL。支援路徑參數：[chunk]、[filename] 和 [contenthash]。將 append 設定為 false 會停用附加。

moduleFilenameTemplate#

• 類型： string

請參閱 output.devtoolModuleFilenameTemplate。

fallbackModuleFilenameTemplate#

• 類型： string

請參閱上方連結。

namespace#

• 類型： string

請參閱 output.devtoolNamespace。

module#

• 類型： boolean
• 預設值： true

指出載入器是否應產生原始碼地圖。

columns#

• 類型： boolean
• 預設值： true

指出是否應使用欄對應。

noSources#

• 類型： boolean
• 預設值： false

防止原始檔案內容包含在原始碼地圖中。

publicPath#

• 類型： string

使用公用路徑前綴發出絕對 URL，例如 https://example.com/project/。

fileContext#

• 類型： string

使 [file] 引數相對於此目錄。

當您想要將原始碼地圖儲存在較上層的目錄中，以避免在絕對 [url] 中出現 ../../ 時，fileContext 選項會很有用。

sourceRoot#

• 類型： string

在原始碼地圖中為 sourceRoot 屬性提供自訂值。

範例#

下列範例說明此外掛程式的一些常見使用案例。

基本使用案例#

您可以使用下列程式碼，以等效的自訂外掛程式設定取代設定選項 devtool: inline-source-map

module.exports = {
  // ...
  devtool: false,
  plugins: [new rspack.SourceMapDevToolPlugin({})],
};

排除供應商地圖#

下列程式碼會排除 vendor.js 套件中任何模組的原始碼地圖

new rspack.SourceMapDevToolPlugin({
  filename: '[file].map[query]',
  exclude: ['vendor.js'],
});

外部託管原始碼地圖#

為原始碼地圖設定 URL。適用於在需要授權的主機上託管它們。

new rspack.SourceMapDevToolPlugin({
  append: '\n//# sourceMappingURL=https://example.com/sourcemap/[url]',
  filename: '[file].map[query]',
});

對於原始碼地圖儲存在較上層目錄中的情況

使用下列設定

new rspack.SourceMapDevToolPlugin({
  filename: 'sourcemaps/[file].map',
  publicPath: 'https://example.com/project/',
  fileContext: 'public',
});

將產生下列 URL