webpackが対応するモジュール形式の説明
以下では、CommonJS以外にwebpackが対応している、AMD形式とES6 Modules形式について説明していきます。
AMD
AMD形式のモジュールでは、defineメソッドの引数に、モジュールとして公開するオブジェクトを返す関数を指定します。例えば、リスト4と同じ関数を公開するAMD形式モジュールは、リスト8の通りになります。
// 関数をモジュールとして公開
define(function(){
return function(input){
return input + "モジュール"
}
});
モジュールの中でほかのモジュールを利用する場合は、リスト9のように、defineメソッドの第1引数に利用するモジュールのファイル名を（1個以上）指定します。
define(
["./str-amd", "./func-amd"], // 変数と関数のモジュールファイルを指定 ...（1）
function (formatName, suffixFunc) { // モジュールを変数として取得 ...（2）
// 関数を含むJavaScriptオブジェクトをモジュールとして公開 ...（3）
return {
sayHello: function () {
return suffixFunc(formatName) + "からこんにちは！";
},
sayBye: function () {
return suffixFunc(formatName) + "からさようなら！";
}
}
});
（1）で使用するモジュールファイル名の配列を指定すると、対応する順番で（2）の関数の引数にモジュールのオブジェクトが与えられます。これらを利用して、（3）で関数を含むJavaScriptオブジェクトを作成し、モジュールとして公開します。
モジュールを利用するには、リスト10のようにrequireメソッドを利用します。記述方法はdefineと同様で、第1引数にモジュールファイル名を指定する（1）と、第2引数の関数にモジュール変数が与えられるので（2）、それを利用して処理を行います（3）。
window.addEventListener("load", function(){
require(
["./greet-amd"], // greet-amdモジュールを指定 ...（1）
function(module){ // モジュールを変数として取得 ...（2）
// モジュールのメソッドを実行 ...（3）
document.getElementById("output1").textContent
= module.sayHello();
document.getElementById("output2").textContent
= module.sayBye();
})
}, false);
ES6 Modules
ES6 Modules形式のモジュールは、export default記述でモジュールを公開します。例えば、リスト4、8と同じ内容の関数を公開するモジュールはリスト11のようになります。
// 関数をモジュールとして公開
export default function(input) {
return input + "モジュール"
}
モジュールを利用する場合は、リスト12（1）のように、import記述にモジュールのファイル名を指定して参照します。
// モジュールとして公開された文字列と関数を参照 ...（1）
import formatName from "./str-es6";
import suffixFunc from "./func-es6";
// 関数を含むJavaScriptオブジェクトをモジュールとして公開 ...（2）
export default {
sayHello:function(){
return suffixFunc(formatName) + "からこんにちは！";
},
sayBye:function() {
return suffixFunc(formatName) + "からさようなら！"
}
}
リスト12（2）で公開したモジュールをindex.jsから参照する処理も、同様にimport記述で行います。詳細はサンプルコードを参照してください。
参考：ES6 Modulesの「default」
ES6 Modulesのモジュールに指定する「export default」のdefaultは、モジュールごとに1つだけ指定できるデフォルトエクスポートを表します。デフォルトエクスポートが指定されたオブジェクトは、import記述で最優先にインポートされます。ES6 Modulesでは、デフォルトエクスポート以外に、明示的に名前を付けて複数のエクスポートを設定できます（名前付きエクスポート）。詳細はMozillaのドキュメントを参照してください。
CommonJS、AMD、ES6 Modulesのいずれのモジュールも、同一のコマンド（リスト7）で処理できます。
異なるモジュール形式の利用
webpackを利用すると、異なる形式のJavaScriptモジュールを形式を意識しないで利用できます。例えばリスト13のように、CommonJS形式のモジュールをES6 Modulesのimport記述で参照しても問題なく動作します。
// CommonJS形式のモジュールを、ES6 Modules形式で参照 import module from "./greet-common";
例えば、インターネット上で提供されている既存のライブラリを利用する際、どのモジュール形式で記述されているか考えなくてよいので便利です。
まとめ
本記事では、Webページを構成するファイルの依存性を解決してまとめるモジュールバンドラーのwebpackを説明し、コマンドラインでJavaScriptファイルを処理する利用例を紹介しました。webpackを利用すると、CommonJS／AMD／ES6 Modules形式のJavaScriptモジュールを、依存性を解決しながらまとめることができます。
今回紹介した機能は、webpackで実現可能なことの一部に過ぎません。次回はwebpackをNode.jsのプロジェクトに組み込んで、画像やCSSを処理したり、JavaScriptのトランスパイルや最小化の追加処理を行ったりなど、より実践的な利用法を紹介していきます。
