SourceMapDevToolPlugin

這個外掛啟用更精細的原始碼地圖產生控制。它也會由 devtool 設定選項的特定設定自動啟用。

new webpack.SourceMapDevToolPlugin(options);

選項

支援下列選項

• test (字串 正規表示法 [字串，正規表示法])：根據模組的副檔名納入原始碼地圖 (預設為 .js、.mjs 和 .css)。

• include (字串 正規表示法 [字串，正規表示法])：納入與給定值相符的模組路徑的原始碼地圖。

• exclude (字串 正規表示法 [字串，正規表示法])：從原始碼地圖產生中排除與給定值相符的模組。

• filename (字串)：定義原始碼地圖的輸出檔名 (如果未提供值，將會內嵌)。

• append (字串 函式)：將給定的值附加到原始資產。通常是 #sourceMappingURL 註解。[url] 會替換為原始碼地圖檔案的 URL。自 webpack v4.36.0 起，支援路徑參數：[chunk]、[filename] 和 [contenthash]。將 append 設為 false 會停用附加。

  從版本 5.84.0 開始，webpack 允許 append 選項成為一個函式，接受路徑資料和資產資訊物件作為參數，並傳回字串。

  (pathData: PathData, assetInfo?: AssetInfo) => string;

• moduleFilenameTemplate (字串)：請參閱 output.devtoolModuleFilenameTemplate。

• fallbackModuleFilenameTemplate (字串)：請參閱上述連結。

• namespace (字串)：請參閱 output.devtoolNamespace。

• module = true (布林值)：表示載入器是否應產生原始碼對應。

• columns = true (布林值)：表示是否應使用欄位對應。

• noSources = false (布林值)：防止原始碼檔案內容包含在原始碼對應中。

• publicPath (字串)：發出具有公開路徑前綴的絕對 URL，例如 https://example.com/project/。

• fileContext (字串)：使 [file] 參數相對於此目錄。

• sourceRoot (字串)：提供原始碼對應中 sourceRoot 屬性的自訂值。

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

範例

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

基本使用案例

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

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

排除供應商地圖

下列程式碼將排除 vendor.js 捆綁包中任何模組的原始碼地圖

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

外部主機原始碼地圖

設定原始碼地圖的 URL。這對於將原始碼地圖主機在需要授權的伺服器上很有用。

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

以及原始碼地圖儲存在上層目錄的情況

project
|- dist
  |- public
    |- bundle-[hash].js
  |- sourcemaps
    |- bundle-[hash].js.map

使用下列設定

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

將產生下列 URL

https://example.com/project/sourcemaps/bundle-[hash].js.map