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

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

ローダーでさまざまな種類のファイルを処理

　ローダーは、特定種類のファイルに対する処理機能をwebpackに追加します。ローダーはwebpack本体とは別に「npm install --save-dev」コマンドでインストールします。インストールするパッケージは、サンプルのpackage.json（devDependencies要素）を参照してください。

CSS（css-loader、style-loader）

　css-loaderはCSSを読み込むローダー、style-loaderは<style>タグをWebページに挿入するローダーで、組み合わせて利用されます。利用法を図3のサンプルで説明します。

図3　webpackでCSSを処理するサンプル（004-loader-css）

　ローダーはリスト6のようにloaders属性内に指定します。対象ファイル名の正規表現を（1）のtestに、使用するローダーを（2）のuseに、それぞれ指定します。

リスト6　css-loader、style-loaderの設定（004-loader-css/webpack.config.js）

module: {
    loaders: [
        {
            test: /\.css$/, // ローダーの対象ファイル ...（1）
            use: ["style-loader", "css-loader"] // ローダー指定 ...（2）
        }
    ]
}

　CSSをロードするには、JavaScriptからrequire関数でindex.cssを参照します。

リスト7　CSSファイルをJavaScriptから参照する記述（004-loader-css/index.js）

require("./index.css"); // CSSファイルを参照する

　webpackを実行してWebページを表示すると、図3のようにindex.cssに定義されている背景色がページに反映されます。このとき、HTMLファイルにindex.cssへの参照はありませんが、webpackが生成したbundle.jsが動的に<style>タグをページに埋め込みます。

画像（url-loader）

　url-loaderは、画像などのファイルをJavaScriptファイル内に取り込むローダーです。図4で表示されている画像は、url-loaderで処理したものです。

図4　webpackで画像を処理するサンプル（005-loader-url）

　まずリスト8の通りに記述して、jpg／pngのファイルにurl-loaderを適用します。

リスト8　url-loaderの設定（005-loader-url/webpack.config.js）

test: /\.(jpg|png)$/,
loader: "url-loader"

　JavaScriptではリスト9のように、require関数で画像ファイルを参照して利用します。ここでは、Webページ上の<img>タグに画像を設定しています。

リスト9　画像ファイルをJavaScriptから参照する記述（005-loader-url/index.js）

// 画像ファイルを参照する
var coffeePhoto = require("./img_src/coffee_photo.jpg");
var coffeePict  = require("./img_src/coffee_pict.png");
// 画像を設定する
window.addEventListener("load", function(){
    document.getElementById("image1").src = coffeePhoto;
    document.getElementById("image2").src = coffeePict;
}, false)

　リスト8、9を記述してwebpackを実行すると、出力されるJavaScriptファイルに画像のデータが埋め込まれ、図4のようにページに画像が表示されます。JavaScriptファイルをテキストエディタで開くと、画像が埋め込まれていることが確認できます（図5）。

図5　JavaScriptに埋め込まれた画像データ（005-loader-url/bundle.js）

　なお、リスト10の通りに記述すると、ファイルサイズ102400バイト超の画像をJavaScriptファイルに埋め込まずに、img/<ランダム文字列>.<拡張子>というファイルに出力するよう設定できます。

リスト10　ファイルサイズ上限を設定する例（005-loader-url/webpack.config.js）

loader: "url-loader?limit=102400&name=img/[hash].[ext]"

JavaScriptの変換（babel-loader）

　最近のJavaScript開発では、新しい規格のJavaScriptや、JavaScriptを拡張した言語（いわゆるaltJS）のファイルを変換するツールが利用されます。本記事ではこうしたツールとして、Babelをwebpackで利用する方法を紹介します。

　例示するサンプル（006-loader-babel）では、リスト11のように、ES6のclass構文を利用しています。classをサポートしないブラウザーでは動作しないので、Babelでより古い（互換性のある）形式に変換します。

リスト11　ES6のclass構文を利用した記述（006-loader-babel/greet-es6.js）

import formatName from "./str-es6";
import suffixFunc from "./func-es6";
export default class Greeter { // ES6のclass形式で記述
  sayHello() {
    return suffixFunc(formatName) + "からこんにちは！";
  }
  sayBye() {
    return suffixFunc(formatName) + "からさようなら！"
  }
}

　webpackでBabelを利用するには、webpack.config.jsにリスト12の通り記述します。excludeは除外設定です（/node_modules配下のJavaScriptにはBabelを適用しない）。

リスト12　babel-loaderの設定（006-loader-babel/webpack.config.js）

test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"

　Babelの設定ファイル.babelrcは、リスト13のようにES2015（ES6）を変換するプリセット設定を指定します。.babelrcの詳細についてはBabelのドキュメントを参照してください。

リスト13　Babelの設定ファイル（006-loader-babel/.babelrc）

{ "presets": ["es2015"] }

　リスト11～13のプロジェクトでwebpackを実行すると、ES6のclass構文が変換されるので、class構文に対応しないInternet Explorer 11でも正常に実行できるようになります。リスト12の設定を削除すると、IE11で正常に実行できなくなります。

図6　Babelでclass構文を変換してIE11で実行（006-loader-babel）

　babel-loaderと類似のローダーとして、TypeScriptで記述されたコードを変換するts-loaderがあります。利用方法はほぼ同様です。詳細はサンプルコード（007-loader-ts）を参照してください。