devtool#

devtool 設定は、ソースマップ生成の動作を制御するために使用されます。

• 種類

export type Devtool =
  | false
  | 'eval'
  | 'cheap-source-map'
  | 'cheap-module-source-map'
  | 'source-map'
  | 'inline-cheap-source-map'
  | 'inline-cheap-module-source-map'
  | 'inline-source-map'
  | 'inline-nosources-cheap-source-map'
  | 'inline-nosources-cheap-module-source-map'
  | 'inline-nosources-source-map'
  | 'nosources-cheap-source-map'
  | 'nosources-cheap-module-source-map'
  | 'nosources-source-map'
  | 'hidden-nosources-cheap-source-map'
  | 'hidden-nosources-cheap-module-source-map'
  | 'hidden-nosources-source-map'
  | 'hidden-cheap-source-map'
  | 'hidden-cheap-module-source-map'
  | 'hidden-source-map'
  | 'eval-cheap-source-map'
  | 'eval-cheap-module-source-map'
  | 'eval-source-map'
  | 'eval-nosources-cheap-source-map'
  | 'eval-nosources-cheap-module-source-map'
  | 'eval-nosources-source-map';

• デフォルト： eval

ソースマップ生成動作の主な種類は、source-map、eval、cheap、module、inline、nosources、hidden であり、これらを組み合わせることができます。

• source-map は最も基本的な動作で、ソースマップの生成を示します。ソースマップを有効にすると、ビルドのパフォーマンスに部分的なオーバーヘッドが生じます。

• eval は、生成されたモジュールコードを eval() でラップします。そのため、Rspack は内部的に生成されたモジュールの結果をキャッシュできます。そのため、eval を source-map と組み合わせて使用​​すると、再ビルド時のソースマップ生成速度が最適化されます。

• cheap は、ソースマップが列のマッピングを無視して行のマッピングのみを生成することを意味し、ソースマップの生成を高速化します。

• module は、ローダーがソースマップを返す必要があるかどうかを制御するために使用されます。そのため、module がない場合、ソースマップはローダーによって処理されるコードのみをマッピングできます。また、ローダーはソースマップを処理する必要がないため、ソースマップの生成速度が向上します。

• inline は、生成されたソースマップがデータURLを介してファイルの末尾にインライン化されるかどうかを示します。

• nosources は、生成されたソースマップにソースコードコンテンツを含めるかどうかを制御し、生成されたソースマップのサイズを削減します。

• hidden は、生成されたファイルの末尾に # sourceMappingURL=... アノテーションを含めるかどうかを制御します。ブラウザの開発ツールや VS Code などは、デバッグ中に製品の行番号をソースコード内の場所に戻すために、このアノテーションのパスまたはデータ URL でソースマップを探します。