webpack is 何?

webpack とは一言で言うと JavaScript 向けのモジュール・バンドラーです。複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）してくれます。

複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめる

モジュール・バンドラーには他にも後発の esbuild や Parcel といったものがあり、これらには webpack にはない数々の美点がありますが、総合力で見ればいまだに webpack に一日の長があると言えるでしょう。

なんで必要なの？

たとえば a.js, b.js, c.js の 3 つのファイル（=モジュール）があり、a.js の実行には b.js の機能が必要であり、b.js の実行には c.js の機能が必要であるとします。

この a -> b -> c の関係をモジュールの依存関係と言いますが、これらを HTML ファイルで読み込むには以下のようにする必要があります。

<script src="c.js"></script>
<script src="b.js"></script>
<script src="a.js"></script>

この方式には次のような問題があります：

このため、webpack のようなモジュール・バンドラーを用いてあらかじめ依存関係が解決済みの単一ファイルにしておくことに利点が生じます。

zenn-webpack という名前のフォルダを作成し、Node.js のプロジェクトとして初期化します。