Devtool
このオプションは、ソースマップを生成するかどうか、またどのように生成するかを制御します。
より詳細な設定については、SourceMapDevToolPluginを使用してください。既存のソースマップを処理するには、source-map-loaderを参照してください。
devtool
string = 'eval' false
デバッグプロセスを強化するために、ソースマッピングのスタイルを選択します。これらの値は、ビルドとリビルドの速度に劇的な影響を与える可能性があります。
| devtool | performance | production | 品質 | コメント |
|---|---|---|---|---|
| (なし) | ビルド: 最速 リビルド: 最速 | はい | バンドル | 最高のパフォーマンスを備えた本番ビルドに推奨される選択肢。 |
eval | ビルド: 高速 リビルド: 最速 | いいえ | 生成済み | 最高のパフォーマンスを備えた開発ビルドに推奨される選択肢。 |
eval-cheap-source-map | ビルド: OK リビルド: 高速 | いいえ | 変換済み | 開発ビルドのトレードオフとなる選択肢。 |
eval-cheap-module-source-map | ビルド: 低速 リビルド: 高速 | いいえ | 元の行 | 開発ビルドのトレードオフとなる選択肢。 |
eval-source-map | ビルド: 最遅 リビルド: OK | いいえ | オリジナル | 高品質のソースマップを備えた開発ビルドに推奨される選択肢。 |
cheap-source-map | ビルド: OK リビルド: 低速 | いいえ | 変換済み | |
cheap-module-source-map | ビルド: 低速 リビルド: 低速 | いいえ | 元の行 | |
source-map | ビルド: 最遅 リビルド: 最遅 | はい | オリジナル | 高品質のソースマップを備えた本番ビルドに推奨される選択肢。 |
inline-cheap-source-map | ビルド: OK リビルド: 低速 | いいえ | 変換済み | |
inline-cheap-module-source-map | ビルド: 低速 リビルド: 低速 | いいえ | 元の行 | |
inline-source-map | ビルド: 最遅 リビルド: 最遅 | いいえ | オリジナル | 単一ファイルを公開する場合に考えられる選択肢 |
eval-nosources-cheap-source-map | ビルド: OK リビルド: 高速 | いいえ | 変換済み | ソースコードは含まれていません |
eval-nosources-cheap-module-source-map | ビルド: 低速 リビルド: 高速 | いいえ | 元の行 | ソースコードは含まれていません |
eval-nosources-source-map | ビルド: 最遅 リビルド: OK | いいえ | オリジナル | ソースコードは含まれていません |
inline-nosources-cheap-source-map | ビルド: OK リビルド: 低速 | いいえ | 変換済み | ソースコードは含まれていません |
inline-nosources-cheap-module-source-map | ビルド: 低速 リビルド: 低速 | いいえ | 元の行 | ソースコードは含まれていません |
inline-nosources-source-map | ビルド: 最遅 リビルド: 最遅 | いいえ | オリジナル | ソースコードは含まれていません |
nosources-cheap-source-map | ビルド: OK リビルド: 低速 | いいえ | 変換済み | ソースコードは含まれていません |
nosources-cheap-module-source-map | ビルド: 低速 リビルド: 低速 | いいえ | 元の行 | ソースコードは含まれていません |
nosources-source-map | ビルド: 最遅 リビルド: 最遅 | はい | オリジナル | ソースコードは含まれていません |
hidden-nosources-cheap-source-map | ビルド: OK リビルド: 低速 | いいえ | 変換済み | 参照なし、ソースコードは含まれていません |
hidden-nosources-cheap-module-source-map | ビルド: 低速 リビルド: 低速 | いいえ | 元の行 | 参照なし、ソースコードは含まれていません |
hidden-nosources-source-map | ビルド: 最遅 リビルド: 最遅 | はい | オリジナル | 参照なし、ソースコードは含まれていません |
hidden-cheap-source-map | ビルド: OK リビルド: 低速 | いいえ | 変換済み | 参照なし |
hidden-cheap-module-source-map | ビルド: 低速 リビルド: 低速 | いいえ | 元の行 | 参照なし |
hidden-source-map | ビルド: 最遅 リビルド: 最遅 | はい | オリジナル | 参照なし。エラー報告のみを目的としてソースマップを使用する場合に考えられる選択肢。 |
| ショートカット | 説明 |
|---|---|
| パフォーマンス: ビルド | 最初のビルドのパフォーマンスは、devtoolの設定によってどのように影響を受けますか？ |
| パフォーマンス: リビルド | インクリメンタルビルドのパフォーマンスは、devtoolの設定によってどのように影響を受けますか？遅いdevtoolsは、ウォッチモードでの開発フィードバックループを低下させる可能性があります。ビルドはリビルドよりも遅くなるため、スケールはビルドパフォーマンスとは異なります。 |
| production | このdevtoolを本番ビルドに使用することは理にかなっていますか？通常、devtoolがユーザーエクスペリエンスに悪影響を与える場合はいいえです。 |
| 品質: バンドル | チャンクのすべての生成されたコードが、単一のコードの塊として表示されます。これは、devtoolのサポートがない、生の出力ファイルです。 |
| 品質: 生成済み | 生成されたコードが表示されますが、各モジュールはブラウザのdevtoolsで個別のコードファイルとして表示されます。 |
| 品質: 変換済み | ローダーによるプリプロセス後の生成されたコードが表示されますが、追加のwebpack変換の前の状態です。ソース行のみがマップされ、列の情報は破棄されるか生成されません。これにより、ミニマイザーと連携しない、行の中間でのブレークポイントの設定を回避します。 |
| 品質: 元の行 | すべてのローダーがソースマッピングをサポートしていると仮定すると、記述した元のコードが表示されます。ソース行のみがマップされ、列の情報は破棄されるか生成されません。これにより、ミニマイザーと連携しない、行の中間でのブレークポイントの設定を回避します。 |
| 品質: オリジナル | すべてのローダーがソースマッピングをサポートしていると仮定すると、記述した元のコードが表示されます。 |
eval-*の追加 | モジュールごとにソースマップを生成し、evalを介してアタッチします。リビルドのパフォーマンスが向上するため、開発に推奨されます。ウイルススキャンによる大きな遅延を引き起こすWindows Defenderの問題があることに注意してください。 |
inline-*の追加 | ソースマップを、別のファイルを作成する代わりに、元のファイルにインライン化します。 |
hidden-*の追加 | ソースマップへの参照は追加されません。ソースマップがデプロイされていないが、エラーレポートなどの目的で生成する必要がある場合。 |
nosources-*の追加 | ソースコードはソースマップに含まれていません。元のファイルを参照する必要がある場合に役立ちます（追加の構成オプションが必要）。 |
これらの値の一部は開発に適しており、一部は本番環境に適しています。開発では、通常、バンドルサイズのコストを払って高速なソースマップが必要ですが、本番環境では、正確で最小化をサポートする個別のソースマップが必要です。
品質
バンドルコード - 生成されたすべてのコードが、コードの大きな塊として表示されます。モジュールが互いに分離されていることはわかりません。
生成されたコード - 各モジュールが互いに分離され、モジュール名で注釈が付けられて表示されます。webpackによって生成されたコードが表示されます。例: import {test} from "module"; test();の代わりに、var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();のようなものが表示されます。
変換されたコード - 各モジュールが互いに分離され、モジュール名で注釈が付けられて表示されます。webpackが変換する前のコードが表示されますが、ローダーがトランスパイルした後の状態です。例: import {test} from "module"; class A extends test {}の代わりに、import {test} from "module"; var A = function(_test) { ... }(test);のようなものが表示されます。
元のソース - 各モジュールが互いに分離され、モジュール名で注釈が付けられて表示されます。トランスパイルする前の、作成したコードが表示されます。これは、ローダーのサポートに依存します。
ソースコンテンツなし - ソースのコンテンツはソースマップに含まれていません。ブラウザは通常、Webサーバーまたはファイルシステムからソースをロードしようとします。ソースURLを一致させるには、output.devtoolModuleFilenameTemplateを正しく設定する必要があります。
（行のみ） - ソースマップは、1行あたり1つのマッピングに簡略化されます。これは通常、ステートメントごとに1つのマッピングを意味します（このように記述すると仮定）。これにより、ステートメントレベルでの実行のデバッグや、行の列にブレークポイントを設定することができなくなります。ミニマイザーは通常1行しか出力しないため、最小化との組み合わせはできません。
開発
次のオプションは、開発に最適です
eval - 各モジュールはeval()と//# sourceURLで実行されます。これは非常に高速です。主な欠点は、元のコードではなくトランスパイルされたコードにマッピングされるため、行番号が正しく表示されないことです（ローダーからのソースマップはありません）。
eval-source-map - 各モジュールはeval()で実行され、ソースマップがDataUrlとしてeval()に追加されます。最初は遅いですが、高速なリビルド速度を提供し、実際のファイルが生成されます。元のコードにマッピングされるため、行番号は正しくマッピングされます。開発に最適な品質のソースマップが生成されます。
eval-cheap-source-map - eval-source-mapと同様に、各モジュールはeval()で実行されます。「cheap」であるのは、列マッピングがなく、行番号のみがマッピングされるためです。ローダーからのソースマップは無視され、eval devtoolと同様にトランスパイルされたコードのみが表示されます。
eval-cheap-module-source-map - eval-cheap-source-mapと同様ですが、この場合、ローダーからのソースマップが処理されて、より良い結果が得られます。ただし、ローダーのソースマップは、1行あたり1つのマッピングに簡略化されます。
特殊なケース
次のオプションは、開発にも本番環境にも最適ではありません。たとえば、サードパーティ製のツールなど、いくつかの特別なケースで必要です。
inline-source-map - ソースマップがDataUrlとしてバンドルに追加されます。
cheap-source-map - 列マッピングのないソースマップで、ローダーのソースマップを無視します。
inline-cheap-source-map - cheap-source-mapと同様ですが、ソースマップがDataUrlとしてバンドルに追加されます。
cheap-module-source-map - ローダーのソースマップを1行あたり1つのマッピングに簡略化する、列マッピングのないソースマップ。
inline-cheap-module-source-map - cheap-module-source-mapと同様ですが、ソースマップがDataUrlとしてバンドルに追加されます。
本番環境
これらのオプションは、通常、本番環境で使用されます
(なし) (devtoolオプションを省略するか、devtool: falseを設定) - ソースマップは出力されません。これは、始めるのに適したオプションです。
source-map - 完全なソースマップが別のファイルとして出力されます。開発ツールが場所を認識できるように、参照コメントがバンドルに追加されます。
hidden-source-map - source-mapと同じですが、参照コメントがバンドルに追加されません。ブラウザの開発ツール用にソースマップを公開したくないが、エラーレポートからエラーのスタックトレースをマッピングするためにのみソースマップが必要な場合に役立ちます。
nosources-source-map - ソースマップはsourcesContentなしで作成されます。クライアントでスタックトレースをマップするために使用できますが、ソースコード全体は公開しません。ソースマップファイルをWebサーバーにデプロイできます。
8 貢献者
