Webページの構成ファイルをまとめる、モジュールバンドラー「webpack」入門

HTML／JavaScript開発作業を効率化する便利ツールの活用 第9回

　本連載では、HTML／JavaScript開発作業を効率化する、さまざまなツールやライブラリを紹介します。今回取り上げる「webpack」は、Webページを構成するさまざまなファイルを、依存性を解決しながらまとめる「モジュールバンドラー」です。JavaScriptの依存性解決ができるほか、画像ファイルやCSSなど、さまざまな種類のファイルを処理できるwebpackの利用法を、第9回と第10回の2回にわたって説明します。

はじめに

　一般的に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のインストール方法を利用します。プロジェクトごとにインストールする利用法は次回の記事で説明します。