Webpack-devtoolの構成とsourceMapの選択



Webpack Devtool Configuration



公式マニュアルポータ​​ル

devtool構成の公式定義は単純です。 いずれかを選択してください ソースマップ デバッグプロセスを強化するためのフォーマット、異なる値はビルドのビルドと再構築の再構築の速度に大きく影響します



ただし、ソースマップとは何ですか、公式ソースはさまざまなソースマップを提供します。違いは、開発で選択する必要があるものです。学習する必要があります。

1.ソースマップとは

これで、フロントエンドコードはbabelまたはさまざまなタイプの圧縮によってコンパイルされます。デバッグでは、コンパイルまたは圧縮されたコードのみをデバッグできます。簡単に言うと、ソースマップは、圧縮ファイル内のコードをソースファイル内の元の場所にマップする方法を提供します。



反応プロジェクトコードの前後にソースマップを使用する

コンパイルされたコード
画像

ソースマップを使用した後のコード
画像



ソースマップを使用した後、私たちが書いたコードでのデバッグと同等にすることができます〜

1.1ソースマップの分類

ソースマップファイルは、インラインとアウトバウンドの2つのカテゴリに分類されます

  • インラインソースマッピング、生成されたファイル間にマッピングされたデータを追加.mapファイル内sourcesContentソースコードを保存するフィールド
  • アウトソーシングされたソースマッピング、マッピングデータを別のマッピングファイルに保存し、タグを使用してソースをソースコードにリンクし、通常はソースコードからコメントを削除します

1.2ソースマップキーワード

Webpackは、ソースマップにいくつかのキーワードを提供します。詳細については、次の表を参照してください。

キーワード 意味
eval evalパッケージコードを使用する
ソースマップ .mapファイルを生成する
安いです 列情報もローダーのソースマップも含まれていません
モジュール ローダーを含むソースマップ
列をなして .mapファイルを個別に生成するのではなく、.mapをDataURLとして埋め込みます

2.webpackが提供するいくつかのソースマップモード

ソースマップモードは、上記のキーワードの組み合わせです。

devtool ビルド速度 再構築速度 本番環境 品質
(なし) +++ +++ はい パッケージ化されたコード
eval +++ +++ しない 生成されたコード
cheap-eval-source-map + ++ しない 変換されたコード(行のみ)
cheap-module-eval-source-map または ++ しない 元のソースコード(行のみ)
eval-source-map - + しない 元のソースコード
安いソースマップ + または しない 変換されたコード(行のみ)
cheap-module-source-map または - しない 元のソースコード(行のみ)
インライン-安い-ソース-マップ + または しない 変換されたコード(行のみ)
インライン-安い-モジュール-ソース-マップ または - しない 元のソースコード(行のみ)
ソースマップ - - はい 元のソースコード
インラインソースマップ - - しない 元のソースコード
隠しソースマップ - - はい 元のソースコード
nosources-source-map - - はい パッシブコードコンテンツ

+++非常に速い++速い、+より速く、o中、-遅い、--スロー

2.1品質の説明

Packaged code -生成されたすべてのコードを大きなコードブロックとして扱います。互いに分離されているモジュールは表示されません。

Generated code -各モジュールは互いに分離され、モジュール名で注釈が付けられています。 webpackによって生成されたコードを見ることができます。例:var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42) module__WEBPACK_IMPORTED_MODULE_1__.a()の代わりにimport {test} from 'module' test()のようなものが表示されます。

Converted code -各モジュールは互いに分離され、モジュール名で注釈が付けられています。 Webpack変換前とローダー変換後のコードを確認できます。例:import {test} from 'module' var A = function(_test) { ... }(test)の代わりにimport {test} from 'module' class A extends test {}のようなものが表示されます。

Original source code -各モジュールは互いに分離され、モジュール名で注釈が付けられています。あなたがそれを書くのと同じように、あなたは翻訳の前にコードを見るでしょう。これはローダーのサポートに依存します。

Passive code content -ソースコードの内容はソースマップに含まれていません。ブラウザは通常、Webサーバーまたはファイルシステムからソースコードを読み込もうとします。正しく設定されていることを確認する必要があります output.devtoolModuleFilenameTemplate ソースコードのURLと一致させるため。

(line only) -ソースマップは、1行に1つのマッピングに削減されます。これは通常、ステートメントごとに1つのマッピングしかないことを意味します(このメソッドを使用すると仮定します)。これにより、ステートメントレベルで実行をデバッグできなくなり、各行の一部の列にブレークポイントを設定できなくなります。圧縮されたコードと組み合わせた後、圧縮ツールは通常1行しか出力しないため、マッピングは不可能です。

3.ソースマップの選択

3.1開発環境

次のオプションは、開発環境に最適です。

eval -すべてのモジュールが使用されますeval()実行、および両方//@ sourceURL。このオプションは非常に迅速に作成されます。主な欠点は、元のコードにマップされるのではなく、変換されたコードにマップされるため、行数が正しく表示されないことです(ローダーからソースマップが取得されません)。

eval-source-map -各モジュールの使用eval()実行すると、ソースマップはeval()に追加された後にDataUrlに変換されます。ソースマップの初期化は遅くなりますが、実際のファイルを再構築して生成するときの速度は速くなります。行数は元のコードにマッピングされるため、正しくマッピングできます。開発環境向けの最高品質のソースマップを生成します。

cheap-eval-source-map -同様eval-source-map、各モジュールで使用eval()実施した。これは、列マッピングを生成せず、マップされた行数のみを生成するため、「安価な(オーバーヘッドが少ない)」ソースマップです。ローダーからのソースマップを無視し、evalのように翻訳されたコードのみを表示します。 devtool。

cheap-module-eval-source-map --similar cheap-eval-source-mapそして、この場合、ローダーからのソースマップはより良い結果を得るでしょう。ただし、ローダーのソースマップは1行に1つのマッピングに削減されます。

3.2特定のシーン

次のオプションは、開発および実稼働環境には理想的ではありません。これらは、特定のシナリオ、たとえば一部のサードパーティツールで必要になります。

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ですが、ソースmappはバンドルに追加されたDataUrlに変換されます。

3.3本番環境

これらのオプションは通常、実稼働環境で使用されます。

(none)(省略devtoolオプション)-ソースマップを生成しません。これは良い選択です。

source-map -ソースマップ全体が個別のファイルとして生成されます。バンドルに参照コメントを追加して、開発ツールがそれを見つける場所を認識できるようにします。

hidden-source-map -対source-map同じですが、参照コメントはバンドルに追加されません。このオプションは、ソースマップにエラーレポートからのエラースタックトレースのみをマップさせたいが、ブラウザ開発ツール用にソースマップを公開したくない場合に役立ちます。

nosources-source-map -作成されたソースマップにsourcesContent (source code content)が含まれていません。すべてのソースコードを公開せずに、クライアント上のスタックトレースをマップするために使用できます。ソースマップファイルをWebサーバーに展開できます。