モジュールバンドラーwebpackの設定を調整して、より実践的に使いこなそう

HTML／JavaScript開発作業を効率化する便利ツールの活用 第10回

webpackに機能を追加するプラグイン

　ローダーが特定ファイル形式に対応する変換機能を提供するのに対して、プラグインはより広範な機能をwebpackに追加します。プラグインもローダー同様、「npm install --save-dev」コマンドでインストールして利用します。

JavaScriptの最小化（uglifyjs-webpack-plugin）

　uglifyjs-webpack-pluginは、最小化ツールUglifyJSでJavaScriptを最小化します。リスト14（1）のようにプラグインを参照して、（2）のように読み込みます。

リスト14　uglifyjs-webpack-pluginの設定（008-plugin-uglifyjs/webpack.config.js）

// プラグインを参照 ...（1）
var UglifyJSPlugin = require("uglifyjs-webpack-plugin")
module.exports = {
（略）
    plugins: [
        new UglifyJSPlugin() // プラグインを読み込み ...（2）
    ]
};

　webpackを実行すると、図7のようにJavaScriptが最小化されます。

図7　最小化しない場合（画像＝上）と、した場合（画像＝下）の出力JavaScript（008-plugin-uglifyjs/bundle.js）

HTMLファイルの生成（html-webpack-plugin）

　html-webpack-pluginは、JavaScriptファイルを参照するHTMLファイルを自動的に出力するプラグインです。リスト15の通り設定します。

リスト15　html-webpack-pluginの設定（009-plugin-html/webpack.config.js）

var HtmlWebpackPlugin = require("html-webpack-plugin"); // モジュール参照
module.exports = {
（略）
    plugins: [
        // 既定の設定で出力 ...（1）
        new HtmlWebpackPlugin(),
        // テンプレートを指定して出力 ...（2）
        new HtmlWebpackPlugin({
            filename:"index2.html",
            template:"index.ejs",
            title: "html-webpack-pluginサンプル"
        })
    ]
};

　パラメーターなしで指定すると（1）、index.htmlというファイル名でシンプルなHTMLを生成します。（2）のようにパラメーターを与えて、出力するHTMLファイルの設定をカスタマイズできます。ここではindex.ejsというテンプレートファイルをもとに、HTMLファイルindex2.htmlを出力するようにしています。テンプレート（リスト16）に記述された「htmlWebpackPlugin.options.title」の部分に、リスト15で指定したtitleの内容を埋め込んでHTMLファイルを出力できます。

リスト16　html-webpack-pluginのHTMLテンプレート（009-plugin-html/index.ejs）

<title><%= htmlWebpackPlugin.options.title %></title>

　html-webpack-pluginの詳細な利用法は公式ページを参照してください。

開発用Webサーバーで効率よく開発

　webpack-dev-serverはwebpackで利用できる開発用のWebサーバーで、スクリプトを書き換えるたびにWebページを更新できます。インストールして、package.jsonにリスト17（1）のように記述すると、「npm start」コマンドで開発用Webサーバーが起動します。

リスト17　webpack-dev-serverを実行する記述（010-devserver/package.json）

"scripts": {
  "start": "webpack-dev-server", // 開発用Webサーバーを起動 ...（1）
  "build": "webpack"
},

　開発用Webサーバーの設定はwebpack.config.jsにリスト18の通り記述します。設定できるパラメーターの詳細は公式ドキュメントを参照してください。

リスト18　webpack-dev-serverの設定（010-devserver/webpack.config.js）

module.exports = {
（略）
    devServer: {
        open: true,         // 起動時にブラウザーを開く
        contentBase: ".",   // Webページの基準となるパス
        port: 3000          // ポート番号
    },
（略）
}

　「npm start」コマンドを実行すると既定のWebブラウザーが起動して、図8のようにWebページが表示されます。JavaScriptファイルを書き換えるとWebページが更新されます。

図8　開発サーバーでWebページを表示（010-devserver）

　このサンプル（010-devserver）は、前述したBabelのサンプル（006-loader-babel）をもとにしており、ファイルを修正するたびにBabelの変換処理が自動で実行されます。「Babelで変換→バンドル→Webページ更新」という一連の作業を実行できる意味で、webpackは（Gruntやgulpといった）タスクランナーの機能を備えているといえます。

まとめ

　本記事では、モジュールバンドラーwebpackをNode.jsプロジェクトで利用する方法を説明しました。ローダーとプラグインを併用して、さまざまなファイル変換や、追加タスクを実行できます。さまざまな処理を自動化でき、作業効率を大きく向上できるツールです。

参考資料

• webpack
• Node.js