SourceMapDevToolPlugin

このプラグインにより、ソースマップ生成のより詳細な制御が可能になります。また、devtool設定オプションの特定の設定によっても自動的に有効になります。

new webpack.SourceMapDevToolPlugin(options);

オプション

以下のオプションがサポートされています

• test（string RegExp [string, RegExp]）：拡張子に基づいてモジュールのソースマップを含めます（デフォルトは.js、.mjs、および.cssです）。

• include（string RegExp [string, RegExp]）：指定された値と一致するモジュールパスのソースマップを含めます。

• exclude（string RegExp [string, RegExp]）：指定された値と一致するモジュールをソースマップ生成から除外します。

• filename (string): SourceMapの出力ファイル名を定義します（値を指定しない場合はインライン化されます）。

• append (string function): 指定された値を元の資産に追加します。通常は#sourceMappingURLコメントです。[url]はソースマップファイルへのURLに置き換えられます。Webpack v4.36.0以降、パスパラメータ[chunk]、[filename]、[contenthash]がサポートされています。appendをfalseに設定すると、追加は無効になります。

  バージョン5.84.0以降、Webpackでは、appendオプションを、パスデータとアセット情報オブジェクトを引数として受け取り、文字列を返す関数にすることができます。

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

• moduleFilenameTemplate (string): output.devtoolModuleFilenameTemplateを参照してください。

• fallbackModuleFilenameTemplate (string): 上記のリンクを参照してください。

• namespace (string): output.devtoolNamespaceを参照してください。

• module = true (boolean): ローダーがソースマップを生成するかどうかを示します。

• columns = true (boolean): 列マッピングを使用するかどうかを示します。

• noSources = false (boolean): ソースファイルの内容がソースマップに含まれないようにします。

• publicPath (string): パブリックパスプレフィックス付きの絶対URLを出力します。例：https://example.com/project/。

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

• sourceRoot (string): SourceMapのsourceRootプロパティにカスタム値を提供します。

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

例

次の例では、このプラグインの一般的なユースケースを示しています。

基本的なユースケース

次のコードを使用して、設定オプション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