ホームページを作るためには、HTMLファイルだけでなく、CSSやJavaScript、画像やWebフォントなど、さまざまなファイルを用意する必要があります。
こうしたWebで必要なファイルをワンパッケージにまとめてくれる便利なものとして、「Webpack」という技術が次第に注目を集めています。

Webpackは、複数のファイルを１つのメインファイルにまとめてくれるだけではなく、SassやLESSなどのCSSプリプロセッサー言語をコンパイルしてくれるので、大変便利です。
GruntやGulpのようなタスクランナーと並んで、非常に注目を集めています。

今回は、JavaScriptの開発現場で人気を集めている「Webpack」について、入門記事としてその概要や簡単な使い方をご紹介します。

Webpackとは？

webpack.png

Webpackとは、CSSやJavaScript、画像などWebコンテンツを構成するあらゆるファイル(アセット)を「モジュール」という単位で取り扱い、「バンドル」という１つのファイルに最適な形で変換するためのツールです。

例えば、１つのJavaScriptファイルに長い処理を書くと、可読性が悪くなり、バグが生まれやすくなったり、結果的に開発スピードが遅くなったりする原因になります。
これを解決するために、「モジュール」という単位でJavaScriptを複数ファイルに分割して開発することがあります。
こうすれば、エラーが起こったり仕様変更をした場合に、どのモジュールを修正すればいいのかが分かり、開発スピードが早くなります。

しかし、JavaScriptの現行の仕様では、モジュールを扱うための仕組みが整っていないため、これまでにモジュールを取り扱うためにさまざまな仕様が検討されてきました。
Webpackを使えば、JavaScriptモジュールをブラウザで扱える形に簡単に変換することができます。

さらにユニークなのは、Webpackでは、JavaScriptだけでなくCSS、画像、Webフォント、音声、動画など、あらゆるアセットをモジュールとして扱い、１つの「バンドル」として出力することができる点です。

Webpackコマンドを使ってビルドすることで、ビルドされた「バンドル」の中にさまざまなファイルが「コード」として埋め込まれます。
これにより、ファイルのリクエスト数が減少し、ページ読み込み速度の改善が見込めるのです。

Webpackを使うための準備

Webpackを使うには、npm経由でダウンロード・インストールを行います。
Macではターミナル、Windowsならコマンドプロンプトに下記のコマンドを入力するだけでOＫです。

npm install -g webpack

もしMacでインストール中にエラーが出る場合は、コマンド冒頭に「sudo」と指定して管理者権限で実行してください。

参考：
知っておいて損はなし！新人Webデザイナーのための「npm」入門

インストールが完了したら、コンテンツのファイル一式を保存するためのフォルダーを任意の場所に作成し、コマンドでその場所に移動してください。
移動後、下記コマンドを実行してnpmを初期化します。

npm init

すると、プロジェクトの設定情報が記述された「package.json」というファイルが生成されます。
Webpackを実行するために、Webpack本体をプロジェクトフォルダにもインストールします。

npm install --save-dev webpack

これでWebpackを使用するための準備が整いました。