TL;DR
エントリポイントから依存関係をたどり、アプリケーションが必要とするモジュールを 1 つ以上のファイル（バンドル）にまとめるツール。webpack、Vite（本番ビルド）などがある。
なぜ必要か
Vite の公式ドキュメントによると、ブラウザはネイティブの ES Modules を読み込めるが、それをそのまま本番に出すと、ネストした import のたびにネットワークの往復が増えて非効率になる。そのため本番向けの最適化されたビルドでは、今もバンドルが必要とされている。
仕組み
webpack の公式ドキュメントでは、webpack を「静的モジュールバンドラ」と説明している。1 つ以上のエントリポイントから内部で依存グラフを作り、プロジェクトが必要とするモジュールをすべてバンドルにまとめる。バンドルは、コンテンツを配信するための静的なファイルである。webpack がそのまま扱えるのは JavaScript、JSON、WebAssembly だけで、それ以外のファイルはローダーで変換してから依存グラフに加える。
例
Effective TypeScript 項目73 によると、TypeScript とバンドラを併用するときは、バンドラが自分でソースマップを生成することがあるので、その設定も必要になる。項目78 では、Vite はデフォルトでトランスパイルだけを行うが、ts-loader を使った webpack は型チェックも行うとしている。
注意点
開発時にもバンドルする方式では、サーバを起動する前にバンドルを作る必要があり、アプリケーションが大きいほど起動が遅くなる。Vite はこれを避けるため、開発時はソースコードをネイティブの ES Modules として配信する。