マニフェスト

webpack で構築された一般的なアプリケーションまたはサイトでは、3 つの主要なコードタイプがあります

1. あなた、そしておそらくあなたのチームが書いたソースコード。
2. ソースが依存しているサードパーティライブラリまたは「ベンダー」コード。
3. すべてのモジュールの相互作用を行う webpack ランタイムと**マニフェスト**。

この記事では、これら 3 つの部分の最後の部分、つまりランタイム、特にマニフェストに焦点を当てます。

ランタイム

ランタイムは、マニフェストデータとともに、webpack がブラウザで実行されている間にモジュール化されたアプリケーションを接続するために必要なすべてのコードです。モジュールが相互作用するときに接続するために必要なロードと解決のロジックが含まれています。これには、すでにブラウザにロードされているモジュールの接続と、まだロードされていないモジュールを遅延ロードするロジックが含まれます。

マニフェスト

アプリケーションが `index.html` ファイルの形式でブラウザに到達すると、アプリケーションに必要なバンドルといくつかのその他のアセットを何らかの方法でロードしてリンクする必要があります。注意深くレイアウトした `/src` ディレクトリは、webpack の `optimization` によってバンドル、縮小、さらには小さなチャンクに分割されて遅延ロードされる場合があります。では、webpack は必要なすべてのモジュール間の相互作用をどのように管理するのでしょうか？ここでマニフェストデータが登場します...

コンパイラは、アプリケーションを入力、解決、およびマッピングするときに、すべてのモジュールに関する詳細なメモを保持します。このデータのコレクションは「マニフェスト」と呼ばれ、ランタイムがモジュールをバンドルしてブラウザに送信した後にモジュールを解決してロードするために使用されます。モジュール構文の選択に関係なく、 `import` または `require` ステートメントは、モジュール識別子を指す `__webpack_require__` メソッドになりました。マニフェストのデータを使用すると、ランタイムは識別子の背後にあるモジュールを取得する場所を見つけることができます。

問題

これで、webpack の舞台裏での動作について少し理解できました。「でも、これは私にどう影響するの？」と疑問に思うかもしれません。ほとんどの場合、影響はありません。ランタイムはマニフェストを利用してその役割を果たし、アプリケーションがブラウザに到達するとすべてが魔法のように機能しているように見えます。ただし、ブラウザのキャッシュを利用してプロジェクトのパフォーマンスを向上させようとすると、このプロセスが突然理解することが重要になります。

バンドルファイル名内にコンテンツハッシュを使用することにより、ファイルの内容が変更されたときをブラウザに示し、キャッシュを無効にすることができます。ただし、これを実行し始めると、すぐに奇妙な動作に気付くでしょう。コンテンツが明らかに変更されていない場合でも、特定のハッシュが変更されます。これは、ビルドごとに変更されるランタイムとマニフェストの挿入が原因です。

マニフェストを抽出する方法については、*出力管理*ガイドのマニフェストセクションを参照してください。長期キャッシュの複雑さについては、以下のガイドをお読みください。