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

publicPath プレフィックス付きの絶対URLを出力します（例: https://example.com/project/）。

fileContext#

• 型: string

[file] 引数をこのディレクトリを基準とした相対パスにします。

fileContext オプションは、ソースマップを上位レベルのディレクトリに保存して、絶対 [url] に ../../ が表示されないようにする場合に役立ちます。

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が生成されます。