ローダーでさまざまな種類のファイルを処理
ローダーは、特定種類のファイルに対する処理機能を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)](http://cz-cdn.shoeisha.jp/static/images/article/10516/10516_003_s.png)
ローダーはリスト6のようにloaders属性内に指定します。対象ファイル名の正規表現を(1)のtestに、使用するローダーを(2)のuseに、それぞれ指定します。
module: { loaders: [ { test: /\.css$/, // ローダーの対象ファイル ...(1) use: ["style-loader", "css-loader"] // ローダー指定 ...(2) } ] }
CSSをロードするには、JavaScriptからrequire関数でindex.cssを参照します。
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)](http://cz-cdn.shoeisha.jp/static/images/article/10516/10516_004_s.png)
まずリスト8の通りに記述して、jpg/pngのファイルにurl-loaderを適用します。
test: /\.(jpg|png)$/, loader: "url-loader"
JavaScriptではリスト9のように、require関数で画像ファイルを参照して利用します。ここでは、Webページ上の<img>タグに画像を設定しています。
// 画像ファイルを参照する 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)](http://cz-cdn.shoeisha.jp/static/images/article/10516/10516_005_s.png)
なお、リスト10の通りに記述すると、ファイルサイズ102400バイト超の画像をJavaScriptファイルに埋め込まずに、img/<ランダム文字列>.<拡張子>というファイルに出力するよう設定できます。
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でより古い(互換性のある)形式に変換します。
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を適用しない)。
test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"
Babelの設定ファイル.babelrcは、リスト13のようにES2015(ES6)を変換するプリセット設定を指定します。.babelrcの詳細についてはBabelのドキュメントを参照してください。
{ "presets": ["es2015"] }
リスト11~13のプロジェクトでwebpackを実行すると、ES6のclass構文が変換されるので、class構文に対応しないInternet Explorer 11でも正常に実行できるようになります。リスト12の設定を削除すると、IE11で正常に実行できなくなります。
![図6 Babelでclass構文を変換してIE11で実行(006-loader-babel/bundle.js)](http://cz-cdn.shoeisha.jp/static/images/article/10516/10516_006_s.png)
babel-loaderと類似のローダーとして、TypeScriptで記述されたコードを変換するts-loaderがあります。利用方法はほぼ同様です。詳細はサンプルコード(007-loader-ts)を参照してください。