はじめに
一般的にWebページは、HTMLファイル以外にJavaScriptやCSS、画像など、複数のファイルから構成されます。ファイル数が多くなってくると、構成ファイルの依存性を正しく管理することが難しくなります。
webpackは、Webページを構成するファイルの依存性を自動的に処理してまとめるツールです。モジュールをまとめる（バンドルする）ことから「モジュールバンドラー」と呼ばれます。
今回はwebpackの概要を説明したあと、コマンドラインからwebpackでJavaScriptモジュールをまとめる例を紹介します。また、webpackが対応する、JavaScriptモジュール形式についても説明します。
対象読者
- Webページを構成する大量のファイルが把握できなくなった方
- JavaScriptコードをモジュール分けしてスマートに記述したい方
- 最近のJavaScriptモジュール事情を確認したい方
必要な環境の準備
webpackの実行にはNode.jsが必要になります。公式サイトからダウンロードしてインストールしてください。
Node.jsのインストール後、リスト1のコマンドでwebpackがインストールされます。「-g」（または「--global」）オプションをつけると、特定のプロジェクトやフォルダにではなく、システム自体にインストールされます。
リスト1 webpackのインストール
npm install -g webpack
今回は以下の環境で動作を確認しています。
- Windows 10 64bit版
- Node.js v6.11.2 64bit版
- webpack v3.5.1
- Microsoft Edge 40.15063.0.0
参考：webpackはプロジェクトごとにインストールしたほうがよい？
webpackの公式ドキュメントでは、リスト1のような（-gオプションを利用した）システム自体へのインストールは、プロジェクトによって異なるバージョンを使い分けられなくなるため、推奨しないと記載されています。本記事ではコマンドラインで直接実行できるようにするため、リスト1のインストール方法を利用します。プロジェクトごとにインストールする利用法は次回の記事で説明します。
