webpack｜企業のDXを成功へと導くアルサーガパートナーズ

webpack

読み方: うぇぶぱっく

JavaScriptアプリケーション用のモジュールバンドラーの1つです。
モジュールバンドラーとは作成したアプリケーションのモジュール（ファイル）を1つに束ねる機能のことです。フロントエンドで使用するためのJavaScriptのライブラリ、CSS、画像など圧縮し、まとめてくれます。

依存関係（※）のあるJavaScriptのモジュールを解決
従来のJavaScriptの依存関係は、htmlにscriptを記述する必要があり、複雑になりがちでした。webpackでは、依存関係を自動的に解決してくれます。

※ある作成したプログラムを動作させる際に、動作させるために必要な別のプログラムがあることです。例えば、dateオブジェクトを使用してプログラムを書いた時、そのプログラムはdateオブジェクトに依存している（dateオブジェクトを利用しないと実現できない）ことになります。

1つのファイルにまとめることで通信回数を抑える
従来のJavaScriptは、モジュール（ファイル）が増えると通信回数も増えてしまいました。webpackでは、モジュールを1つのファイルにまとめているため、通信回数を少なくすることができます。

今までモジュールバンドラーとして、gulpやBrowserifyなど様々なツールがありましが、これらにはビルドが遅い、設定が面倒などの欠点がありました。そんな問題点を解消したのがwebpackです。

Javascriptの他にもCSSや画像も圧縮することができるので、リクエストするファイルを減らしてくれます。結果、アプリケーションのパフォーマンス向上に繋がります。

2009年頃:バックエンドでもJavaScriptを書きたい！という需要が生まれ、Node.jsが作成された。

2012年頃:ブラウザでもモジュールが使えるように！とwebpackがリリース。

2015年:webpackがモジュールバンドラーとしてパフォーマンスがいいと評価され流行。

JavaScriptのファイルを分割してもサイトがスムーズに動くのは、webpackのおかげだなーと改めて思いました。ビルドする時にCSS、画像ファイル等の名前を毎回変えてくれるので、キャッシュが残って変更が反映されない！のようなトラブルも無いので、スムーズな開発ができます。

Nuxt.jsのような主要のフレームワークでは、webpackが標準搭載されているので、設定方法がより簡単になります。そのため、開発経験が浅いエンジニアでもwebpack（モジュールバンドル）が触れる時代になったと言えるでしょう。