source-map-loader

既存のソースファイルから（その sourceMappingURL から）ソースマップを抽出します。

はじめに

まず、source-map-loader をインストールする必要があります

npm i -D source-map-loader

または

yarn add -D source-map-loader

または

pnpm add -D source-map-loader

次に、プラグインを webpack 設定に追加します。例えば

file.js

import css from "file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
    ],
  },
};

source-map-loader は、すべての JavaScript エントリから既存のソースマップを抽出します。これには、インラインソースマップと URL 経由でリンクされたソースマップの両方が含まれます。webpack.config.js の devtool オプションで指定された、選択したソースマップスタイルに従って、すべてのソースマップデータが webpack に渡されて処理されます。このローダーは、独自のソースマップを持つサードパーティライブラリを使用する場合に特に役立ちます。webpack バンドルのソースマップに抽出および処理されない場合、ブラウザはソースマップデータを誤って解釈する可能性があります。source-map-loader を使用すると、webpack はライブラリ全体でソースマップデータの連続性を維持できるため、デバッグの容易さが維持されます。source-map-loader は、node_modules ディレクトリにあるファイルを含む、あらゆる JavaScript ファイルから抽出します。バンドルのパフォーマンスを最大限に高めるために、include および exclude ルール条件の設定に注意してください。

そして、お好みの方法で webpack を実行します。

オプション

filterSourceMappingUrl

タイプ：関数 デフォルト：未定義

SourceMappingURL コメントに対するローダーの動作を指定できます。

関数は、次のいずれかの値を返す必要があります

• true または 'consume' - ソースマップを消費し、SourceMappingURL コメントを削除します（デフォルトの動作）
• false または 'remove' - ソースマップを消費せず、SourceMappingURL コメントを削除します
• skip - ソースマップを消費せず、SourceMappingURL コメントを削除しません

設定例

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: [
          {
            loader: "source-map-loader",
            options: {
              filterSourceMappingUrl: (url, resourcePath) => {
                if (/broker-source-map-url\.js$/i.test(url)) {
                  return false;
                }

                if (/keep-source-mapping-url\.js$/i.test(resourcePath)) {
                  return "skip";
                }

                return true;
              },
            },
          },
        ],
      },
    ],
  },
};

例

警告を無視する

警告を無視するには、次の設定を使用できます

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
    ],
  },
  ignoreWarnings: [/Failed to parse source map/],
};

ignoreWarnings オプションの詳細については、こちらをご覧ください

貢献

まだ貢献ガイドラインを読んでいない場合は、読んでください。

貢献

ライセンス

MIT