フロントエンドエンジニア必見！JavaScript開発現場で人気の「Webpack」とは？

酒井涼

2017年3月8日

6,894

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。
　　
>> 執筆記事一覧はこちら

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

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

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

Webpackとは？

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を使用するための準備が整いました。

Webpackを使ってみる

Step1. モジュールの作成

それでは、3つのモジュールを使った JavaScript 処理を例にして、Webpackの使い方を解説していきます。
メイン処理を行う「main.js」にサブモジュールである「hello.js」と「bye.js」で定義されたメソッドを呼び出す仕組みを作ります。

▼ main.js

var voice1 = require(./hello.js);
voice1.hello();
var voice2 = require(./hello.js);
voice2.bye();

▼ hello.js

module.exports.hello = function() {
　　alert(“こんにちは。”);
}

▼ bye.js

module.exports.bye = function() {
　　alert(“さようなら。”);
}

Step2. Webpackの設定

JavaScript モジュールは、このままではブラウザでは使用できないので、 ブラウザが解釈できる形に変換する必要があります。
Webpackを使うことで、 JavaScript モジュールをブラウザで解釈できる形に変換することができます。
「webpack.config.js」というファイルを作り、「バンドル」にまとめるための設定をします。

▼ webpack.config.js

module.exports = {
　　entry: “./main.js”,
　　output: {
　　　　path: “./”,
　　　　filename: “bundle.js”
　　}
}

「entry」では、メインとなる JavaScript ファイル(「エントリーポイント」と呼びます)を指定し、「output」でファイルの出力設定を行います。

設定ができたら、「webpack」コマンドを実行してビルドを行います。

webpack

これで、「main.js」と「hello.js」「bye.js」が統合され、「bundle.js」に統合されました。
「bundle.js」には統合されたコードだけでなく、メソッドまわりの処理を現行のブラウザでも処理するために必要なコード、各モジュールの処理も含まれています。
HTML で「bundle.js」を読み込むことで、「hello.js」「bye.js」内の処理が実行されます。

タスクランナーとの違い

以上、ごく基本的なWebpackの機能を見てきましたが、概要でも述べた通り、SassやLESSをコンパイルしたりという自動化の側面から、タスクランナーであるGruntやGulpの代わりとして紹介されることがあります。

確かに、Webpackではタスクランナーにできることの多くが実行できます。
しかし、Webpackは CSS や画像を含むさまざまなアセットファイルを１つの JavaScript ファイルとして「バンドル」にまとめて出力することが基本的な使い方となっているので、 CSS や画像を別ファイルとして扱いたい場合にはタスクランナーが必要になります。

そのため、タスクランナーとWebpackは、どちらか一方を使うというよりは併用して使うほうが望ましいといえます。

まとめ

大規模な JavaScript 開発を行うときには、モジュールシステムを使って開発したほうがミスも少なくなり、開発スピードも上がります。
Webpackを使うことで、 JavaScript のモジュールを簡単に一本化することができるだけでなく、他のアセットファイルまでもまとめてくれるという他にはない機能を提供してくれます。
他にも、「ローダー」と呼ばれるプラグインをインストールすることで、様々なメタ言語のコンパイルやコードの圧縮など、面倒なことを取り除いてくれたり便利な機能を扱ったりすることができます。

npmさえインストールしていれば導入はとても簡単です。
JavaScript を扱うことがあるなら、ぜひ一度は使ってみてください。

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