JavaScriptライブラリの依存関係とwebpack
webpackのようなモジュールバンドラーが必要とされる背景を、JavaScriptを例に説明します。一般的に、WebページでJavaScriptライブラリを利用するには、リスト2のように、ライブラリを先、ライブラリを利用するコードを後に、それぞれHTMLファイルのscriptタグで記述します。順番を間違えると、ライブラリが参照できずエラーになります。
<script src="libs.js"></script><!-- ライブラリ --> <script src="logic.js"></script><!-- ライブラリを利用するコード -->
この方法では、利用するライブラリが複数あって、かつ相互に依存関係があると、正しい記述順番を判断するのが非常に難しくなります。
さらに、最近のJavaScriptライブラリでは、ライブラリ自体が複数のモジュールから構成されたり、別のライブラリに依存していたりする場合があります。図1はJavaScriptフレームワークAngularの構成ファイルです。Angularが「@angular/***」という複数のモジュールから構成されており、また、Angular自体も別のライブラリ（rxjsなど）に依存しています。
このように、JavaScriptの依存性を正しく解決するのは、ますます難しい状況になってきており、自動的に依存性を解決するwebpackといったツールが必要とされています。例えば以下の環境では、webpackが標準採用されています。
- Angular、React、Vueのコマンドラインツールで生成したプロジェクト
- Ruby on Railsのフロントエンド側コード
このようにwebpackは、Webフロントエンド開発における依存性解決ツールの標準的な存在になっています。
webpackと似たツール
webpackは多機能であるがゆえ、ほかのツールと比較されることがあります。ここからは、ほかのツールと比較しながら、webpackの特徴を説明していきます。
JavaScriptの依存性解決：Browserify、RequireJS
webpack以前にも、BrowserifyやRequireJSといったJavaScriptモジュールの依存性解決ツールが存在します。BrowserifyはNode.jsのモジュール形式、RequireJSは「AMD」（Asynchronous Module Definition）と呼ばれる形式のモジュールに対応します。webpackはNode.jsの形式と似た「CommonJS」と、AMD、さらにECMAScript 6（ES6）で導入された「ES6 Modules」のモジュールを処理できます。これらの記述方法は後述します。また、webpackでは、CSSや画像ファイルといったJavaScript以外のファイルも処理できます（次回の記事で解説します）。
タスクランナー：Grunt、gulp
webpackでは「ファイルに前処理を適用した後にまとめる」「処理終了後に開発用Webサーバーを起動する」といったタスクを実行できます（設定方法は次回の記事で説明します）。この意味でwebpackは、Gruntやgulpなどのタスクランナーと比較される場合があります。必要ならばgrunt-webpackやgulp-webpackといったプラグインで、Gruntやgulpからwebpackの機能を利用することもできるので、webpackだけで済ませるか別のタスクランナーを利用するかを、状況によって選択できます。
なお、本連載では、Browserify、Grunt、gulpを過去に紹介しているので、参考にしてみてください。
