素朴な疑問
筆者が新人教育する中で、プログラミング実務未経験者がよくされる質問を紹介します。
未経験者に限らず、「そういえば何のために使っている技術（ツール）なんだっけ？」とよく理解していないまま利用しているケースも少なくありません。
この記事で、その純粋で素朴な疑問を改めて明確にして理解を深めていきましょう！
今回の疑問
今回の疑問は表題通り、
「モジュールバンドラー って何？」 です！
モジュールバンドラーの代表的なものとしてwebpackがありますね。
モジュールバンドラーって何？
一言で言うと、
「モジュールを一つ（少数）のファイルへと変換するツール」 です。
ここでいうモジュールとは、プロジェクト内の各ファイルのことを指します。
実際、我々がプログラミングしたモジュールは、そのままではブラウザ上で読み込ませることができません。
それには理由があります。以下の画像をご覧ください。
左側の「変換前」が、プロジェクト内の個々のファイルを表しています。
これらのファイルはimport文やrequire関数によって互いに依存関係を持っております。
依存関係を持つファイルの中には、.jsだけでなく.sassや.cjsなどのさまざまな拡張子があります。
しかし、一例ですが、.sassは.cssに変換しなければブラウザで動作しませんし、.cjsはnode.js環境でなければ機能しません。
そのため、モジュールバンドラーによってこれらのモジュールの依存関係を解消し、ブラウザで動作可能な形式に変換しているのです。