Webpackバンドラーの仕組み

通常、開発時には様々なコード片を含む 多くのJavaScriptファイルが生成されます。 これらは私たちのコードの一部であったり、 サードパーティのライブラリであったりします。 その結果、それぞれのファイルを scriptタグを使ってHTMLファイルに 接続する必要があります。

これはあまり良いことではありません。 なぜなら、多数の接続ファイルはサイトの 読み込み速度を低下させるからです。 したがって、読み込みを高速化するためには すべてのコードを1つのファイルに まとめる必要があります。

しかし、1つの共通ファイルでコードを 開発するのもあまり便利ではありません。 そのため、現在では次のアプローチが 一般的です：コードは個別のファイルで 開発され、その後バンドラーを使用して 1つの共通ファイルにまとめられ、 それがHTMLファイルに接続されます。

個々のファイルは ESモジュールです。 これらのモジュールは importコマンドを介して他のファイルに 接続されます。

通常、他のすべてのファイルが接続される 主要なファイルが作成されます。 このファイルは エントリーポイントと呼ばれます。

バンドラーはエントリーポイントに入り、 どのモジュールがそれに接続されているかを 確認します。これらのモジュールにも 他のモジュールが接続されている場合があります。 バンドラーはすべての接続をたどり、 すべてのコードを1つのファイルにまとめます。 このファイルはバンドルと呼ばれます。

通常、プログラマが書くコードは srcフォルダに配置され、 ビルドされたコードは distフォルダに配置されます。