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」*内の処理が実行されます。

タスクランナーとの違い

ggw.png

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

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

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