モジュール化とは

モジュール化とは、別ファイルに分割すること。コードの管理をしやすくすることで、大規模開発などにも対応できる。

他のコードとの依存性を少なくし、変更、拡張がしやすくなる
変数名の競合をさせないことで、名前空間の汚染を防ぐことができる
機能ごとにモジュール化するため、再利用がしやすい

モジュールバンドラーとは

モジュールバンドラーは複数のJavascriptファイルの依存関係を解析して、一つのファイルとしてまとめてくれる（バンドル）機能があります。モジュールバンドラーによってバンドルされたファイルはそのまま読み込ませて使用することができます。これにより、開発者はファイルの依存関係を気にすることなく、Javascriptファイルを使用することが可能になりました。依存関係を気にすることがなくなったおかげで、大規模な開発などでもJavascriptを導入しやすくなりました。

引用：https://it-kyujin.jp/article/detail/1675/

JSにはもともとファイルをまとめる機能が存在せず、依存関係の解消にかなり手こずっていた背景がある。
そこに登場したのが、モジュールバンドラー。引用にもある通り、依存関係を気にする必要がなくなったことで、大規模開発にも対応できるようになった。

モジュールバンドラーの代表格、「Webpack」

Webpackはもジュールバンドラールーツのこと。Node.js環境で使われる。
WebpackにはNode.jsの環境が必須。Node.jsのパッケージを管理するnpmも必須

依存関係のあるJavaScriptのモジュールを解決
読み込み順を気にせず、1回のリクエストで済むため効率的
JavaScriptモジュールをブラウザで扱える形に簡単に変換できる
ローダやプラグインなどが豊富

記事の投稿を通して、今まではなんとなくインストールして使っていたWebpack。
現代の開発において、なぜモジュールバンドラーが必要なのか、その重要性を理解できました。