ローダーでさまざまな種類のファイルを処理
ローダーは、特定種類のファイルに対する処理機能をwebpackに追加します。ローダーはwebpack本体とは別に「npm install --save-dev」コマンドでインストールします。インストールするパッケージは、サンプルのpackage.json（devDependencies要素）を参照してください。
CSS（css-loader、style-loader）
css-loaderはCSSを読み込むローダー、style-loaderは<style>タグをWebページに挿入するローダーで、組み合わせて利用されます。利用法を図3のサンプルで説明します。
ローダーはリスト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で処理したものです。
まずリスト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）。
なお、リスト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で正常に実行できなくなります。
babel-loaderと類似のローダーとして、TypeScriptで記述されたコードを変換するts-loaderがあります。利用方法はほぼ同様です。詳細はサンプルコード（007-loader-ts）を参照してください。
