JavaScriptにおけるWebpackバンドラの動作原理

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

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

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

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

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

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

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

バンドラはまた、ビルドモードを制御することができます。 'development'モードは開発プロセスを目的としています。 このモードでは、開発に便利な方法でコードがビルドされます。 'production'モードは、最終的に作業にリリースされる コードを目的としています。このモードでは、コードはサイズを縮小し、 読み込み速度を向上させるために最小化されます。