webpackをコマンドラインで利用する
ここでは、webpackをコマンドラインから実行して、複数のJavaScriptファイルをまとめる例を説明します。事前に前述した「必要な環境の準備」を実行して、webpackをインストールしておいてください。
サンプルの構成
本記事のサンプルは共通して、表1のファイルで構成されています。ファイル名の「***」は、モジュールの記述形式によって「common」「amd」「es6」となっています。
| No. | ファイル名 | 説明 |
| 1 | index.html | JavaScript実行結果を表示するHTMLファイル |
| 2 | index.js | greet-***.jsのモジュールを実行するJavaScript |
| 3 | greet-***.js | あいさつ文を返す関数（sayHello、sayBye）を含むJavaScriptオブジェクトを返すモジュール |
| 4 | str-***.js | モジュール形式名の文字列を含むモジュール |
| 5 | func-***.js | 文字列の後ろに「モジュール」を付加する関数を含むモジュール |
No.2～5のJavaScriptファイルには、図2のような参照関係があります。
CommonJS形式のサンプルでwebpackを試す
まず、CommonJS形式のサンプル（001-commonjs）を例に説明していきます。後述のwebpackの処理を行った後でindex.htmlをブラウザーで表示すると、sayHello、sayByeメソッドで取得したあいさつ文が画面に表示されます。
CommonJS形式では、モジュールとして公開したいオブジェクトをmodule.exports変数に代入します。文字列を公開するstr-common.jsはリスト3の通りになります。
// 文字列をモジュールとして公開 module.exports = "CommonJS";
同じ方法で、func-common.jsでは、リスト4の通りに、引数の文字列の後ろに「モジュール」という文字列を付加する関数を公開します。
// 関数をモジュールとして公開
module.exports = function(input) {
return input + "モジュール";
}
モジュールで公開された変数や関数を参照するには、リスト5の通りにrequireメソッドを利用します。
// モジュールとして公開された文字列と関数を参照 ...（1）
var formatName = require("./str-common");
var suffixFunc = require("./func-common");
// 関数を含むJavaScriptオブジェクトをモジュールとして公開 ...（2）
module.exports = {
sayHello:function(){
return suffixFunc(formatName) + "からこんにちは！";
},
sayBye:function() {
return suffixFunc(formatName) + "からさようなら！"
}
}
（1）のrequireメソッドで、リスト3、4のモジュールから文字列と関数を参照して、変数formatName、suffixFuncに格納します。それらを利用して、文字列「～からこんにちは！」を返すsayHelloメソッドと、「～からさようなら！」を返すsayByeメソッドを含むJavaScriptオブジェクトを記述して（2）のmodule.exportsに代入することで、モジュールとして公開します。
リスト5のモジュールを利用する記述はリスト6です。（1）のrequireメソッドでモジュールを参照して、（2）でモジュールのsayHello、sayByeメソッドを実行しています。
// greet-commonモジュールを参照 ...（1）
var module = require("./greet-common");
window.addEventListener("load", function(){
// モジュールのメソッドを実行 ...（2）
document.getElementById("output1").textContent
= module.sayHello();
document.getElementById("output2").textContent
= module.sayBye();
}, false);
リスト3～6はそのままではブラウザーで実行できません。ここでwebpackの出番です。リスト7のコマンドで、リスト3～6の内容をまとめたJavaScriptファイルを作ります。
webpack index.js bundle.js
コマンドの第1引数は入力ファイル名、最後の引数はまとめた結果を出力するファイル名です。index.js以外のファイル（greet-common.js、str-common.js、func-common.js）はコマンド引数に指定されていませんが、webpackが依存関係を自動的に検出して、bundle.jsに含めるように処理します。なお、「webpack <入力ファイル名1> <入力ファイル名2> ... <出力ファイル名>」のように、入力ファイルを複数指定することもできます。
生成されたbundle.jsを、HTMLファイルで参照するように記述してWebページを表示すると、bundle.jsに含まれるリスト3～6の内容が実行されて、図3のように表示されます。
ここで、生成されたbundle.jsをエディターで開くと、リスト3～6の内容のほかに、ブラウザーで実行するためのコードが追加されていることが確認できます。
