Webpackローダーはどのファイルを処理しますか？

Question

ローダーオブジェクトのtestキーの後に正規表現を設定すると、すべてのファイルがプロジェクトにあり、指定したローダーを使用して読み込みます。あなたのエントリーポイント？これはbundle.jsファイルに格納されますか？

Answer 1

いいえ、スクリプトに必要なものだけが含まれます。

Answer 2

<img src={ require('../some/img.png') } />は、Webpackにソースコードでこのイメージを実行する必要があることを伝える方法です。

生産Webpackビルドでは、これは<img src="http://yoursite/whatever/89de0f2.png" />のようにコンパイルされます。 require()ステートメントはであり、決してが実行された場合、有効なJavascriptコードに置き換えられます。この置き換えられたコードはbundle.jsに入れられているものです。

イメージはローカルのdist/フォルダのように指定した出力フォルダに置かれ、ユニークな名前に変更されます。これは通常、ファイルの内容の一部であり、結果として89de0f2.pngになります。 （私は例のためにこの名前を作ったが、それは普通それのように見える）。

このファイルをアップロードすると、89de0f2.pngのソースコードで正確に89de0f2.pngが参照され、画像のバージョンが存在することが保証されます。これは、Webpackが生産に保証された資産ローディングを与える方法です。

Wepbackは、特に必要な場合は、dist/フォルダのimg.pngを89de0f2.pngと置き換えます。他の画像はそのフォルダに入れません。

また、base64エンコード画像について質問して、bundle.jsファイルに直接入力することもできます。この場合、画像はdist/に入れられませんが、他のすべてのルールは応答します。 require()コールは有効なJavascriptに置き換えられます。

Webpackに複数のアセットが必要な場合があります。 <img src={ require.context('./images', true, /\.png/) } />のようなパターンが必要な場合、Webpackはそのディレクトリ内のすべてのpngファイルをdist/フォルダに作成します。詳細については、this Stackoverflow questionを参照してください。