• ローダーとは？
• ローダーの解決
• 使用方法

ローダーとは？

ローダー(Loader)は、アプリケーションのリソースファイルを、適切なものに変える変換器のような役割をします。 これらは、パラーメーターとしてファイル群を受け取り、新しいファイル群を返す機能(node.js上で実行)です。

例えば、ローダーを使用してCoffeeScriptやJSXを読み込むことをwebpackに伝えることが出来ます。

ローダーの機能

• ローダーは処理をチェーンとして繋げることが可能です。 最後のローダーはJavaScriptを返すことが期待されますが、 その他のローダーは任意のフォーマット(次のローダーに渡される)を返しても構いません。
• ローダーは同期と非同期の両方が可能です。
• ローダーはnode.js上で実行され、そこで可能な全てのことを実行することが出来ます。
• ローダーはクエリー・パラメーターを受け付けます。 これは、ローダーへの設定の受け渡しに使用することが出来ます。
• ローダーは設定された拡張子/正規表現に対して、紐付けることが出来ます。
• ローダーはnpmを通した公開とインストールが可能になっています。
• 通常のモジュールはpackage.jsonのloaderを介して、標準のmainだけでなく、 ローダーをexportすることが出来ます。
• ローダーは設定(ファイル)にアクセスすることが可能です。
• プラグインはローダーに、より多くの機能を与えることが可能です。
• ローダーは追加で任意のファイルを発行することが可能です。
• その他

もし、具体的にどのようなローダーがあるのか知りたいのであれば、ローダー一覧 を参照してください。

ローダーの解決

ローダーはモジュールと同じような扱われ方をします。 ローダー・モジュールは関数をexportし、JavaScriptに互換性のあるnode.jsで書かれていることが期待されます。 一般的にはnpmでローダーを管理しますが、アプリケーション内にファイルとしてローダーを持つことも可能です。

ローダーの参照

必須ではありませんが、慣習として通常はXXX-loaderのような名前が付けられ、 XXXにはコンテキスト名が入ります。 例えば、json-loaderといった名前が付けられます。

ローダーの参照には、完全な(実際の)名前(例: json-loader)、または略名(例: json)を使用します。

ローダーの名付けの慣習と、読み込みの優先順位は、webpackの設定APIである resolveLoader.moduleTemplatesに定義されます。

ローダーの名付けの慣習は、特にrequire()式を使用して参照する際に便利かもしれません。 後述する使用方法を参照してください。

ローダーのインストール

ローダーがnpmで利用できるのであれば、次のようにしてローダーをインストールすることが可能です。

$ npm install xxx-loader --save

または、

$ npm install xxx-loader --save-dev

使用方法

ローダーには、アプリケーションで使用する複数の方法が存在します。

• 明示的にrequire式を指定
• 設定ファイルによる指定
• CLIを通じて指定

requireを指定する場合

注意: もし環境(node.js、ブラウザ)を問わないスクリプトにしたいのであれば、出来るだけこの方法は避け、 設定ファイルによるローダーの指定(次のセクションを参照)を使用してください。

require文(または、define、require.ensure、他)に、ローダーを指定することが可能です。 !を使用して、リソースからローダーを分割します。 それぞれのパスは、現在のディレクトリの相対として解決されます。

全体の先頭に!を付けることで、設定ファイル内のローダーの指定を上書きすることが可能です。

require("./loader!./dir/file.txt");
// => 現在のディレクトリの"loader.js"が、
//    "dir"フォルダ内の"file.txt"の変換に使用されます。

require("jade!./template.jade");
// => "jade-loader"(npmを通して"node_modules"にインストールされている)が、
//    "template.jade"の変換に使用されます。
//    もし設定で、何らかの変換の指定がこのファイルが紐付けられている場合は、
//    それらは依然として適用されます。

require("!style!css!less!bootstrap/less/bootstrap.less");
// => "bootstrap"モジュール(githubから"node_modules"へインストールされた)の、
//    "less"フォルダ内の"bootstrap.less"ファイルが、"less-loader"によって変換されます。
//    その結果が"css-loader"によって変換され、更にその後"style-loader"によって変換されます。
//    もし設定で、何らかの変換の指定がこのファイルが紐付けられている場合は、
//    それらは適用されません。

設定

設定で正規表現を使用して、ローダーを紐付けることが出来ます。

{
    module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // => "jade"ローダーは、".jade"ファイルに対して使用されます。

            { test: /\.css$/, loader: "style!css" },
            // => "style"と"css"ローダーは、".css"ファイルに対して使用されます。
            // => また、次のように書くことも可能です。
            { test: /\.css$/, loaders: ["style", "css"] },
        ]
    }
}

CLI

CLIを通して、拡張子にローダーを紐付けることが可能です。

$ webpack --module-bind jade --module-bind 'css=style!css'

ここでは、"jade"ローダーは、".jade"ファイルに対して使用され、 "style"と"css"ローダーは、".css"ファイルに対して使用されます。

クエリーパラメーター

ローダーに、クエリー文字列(webで使用されているような)を通して、クエリーパラメーターを渡すことが可能です。 このクエリー文字れうtは、ローダーの後ろに?付きで追加します。 例えば、url-loader?mimetype=image/pngのように指定します。

注意: クエリー文字列の形式はローダー次第であるため、 形式について知りたければ、ローダーのドキュメントを参照する必要があります。 ほとんどのローダーは、標準のクエリー形式(?key=value&key2=value2)と、 JSONオブジェクトとしての形式(?{"key":"value","key2":"value2"})を受け付けます。

requireでの指定

require("url-loader?mimetype=image/png!./file.png");

設定での指定

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

または、

{
    test: /\.png$/,
    loader: "url-loader",
    query: { mimetype: "image/png" }
}

CLIでの指定

webpack --module-bind "png=url-loader?mimetype=image/png"

 Back to top