WebPackシリーズチュートリアル(六):LOADERSの使用

loadersとは?
loadersはアプリケーションのリソースファイルに適用され、通常は変換に使用されます.これらはすべて関数(nodejsで実行)であり、リソースファイルのソースコードをパラメータとして、処理が完了したら、新しいソースファイルに戻ります.
たとえば、loadersを使用して、coffeescriptとjsxをロードするようにwebpackに伝えることができます.
Loader特性

Loadersはチェーンによって呼び出されることができる.これらは、リソースにパイプとして適用されます.最後のLoaderはjavascriptを返す必要がありますが、他のすべてのloader(次のloaderに渡す)は任意のフォーマットを返すことができます.

Loadersは同期でも非同期でもよい.

Loadersはnodejs環境で動作し、任意のnodejsが完了できる機能を行うことができます.

Loadersはクエリー・パラメータを受け入れ、loaderは外部から渡された構成アイテムを取得できます.

Loadersは、構成において拡張/正規表現をバインドすることができる.

Loadersは、npmによってリリースおよびインストールできます.

通常モジュールはpackage.json loaderの通常mainのほか、loaderインタフェースを外部に開くことができます.

Loadersは構成にアクセスできます.

プラグインシステムはloaderにより多くの特性を与えることができる.

Loadersは、より多くの任意のフォーマットのファイルを外部に配布することができます.

等

いくつかのloadersの例に興味がある場合は、list of loadersにアクセスします.
解析loaders
loadersはモジュールに類似した形式に解析される.loaderモジュールは、nodejs環境におけるjavascript仕様に従って符号化される関数を返すことが望ましい.通常npmを使用してこれらのloadersを管理しますが、プロジェクトでファイル形式でこれらのloadersを使用することもできます.
参照loaders
通常、loadersは必須ではないが、XXX-loaderと命名され、XXXはコンテキスト名、例えばJSON-loaderである.
loaderのフルネーム(実際の名前、例えばjson-loader)、または略記形式(例えば、json)で参照できます.
loaderのネーミング慣行と優先検索順序は、webpackの構成API、resolveLoader.moduleTemplatesで定義されています.
loaderのネーミング慣例は、特にrequire()式で参照する場合に便利です.以下の使用を参照してください.
loadersのインストール
loaderがnpmに存在する場合は、次のコマンドでloaderをインストールできます.

$ npm install xxx-loader --save

または

$ npm install xxx-loader --save-dev

使用
あなたのプロジェクトでloadersを使用する方法はたくさんあります.

require文で明確に明記する.

は、プロファイルによって構成される.

はCLIによって構成される.

loaders in require
注意:必要でない場合は、スクリプトを不明な環境(nodejsとブラウザ)で実行するつもりです.そうでない場合は、この方法ではなく、構成規則を使用してloadersを使用します(次のセクションを参照).
require文(define,require.ensure,etc...)で、ロード可能なloadersを指定します.リソースで使うだけ!loadersを分割します.各セクションは、現在のディレクトリに対して解析されます.
ルール全体の前に!構成内のloadersを上書きすることは完全に可能です.

require("./loader!./dir/file.txt");
// =>           "loader.js"   "dir"    "file.txt"。

require("jade!./template.jade");
// =>   "jade-loader" (that is installed from npm to "node_modules")
// =>      "template.jade"
// =>               ，        。

require("!style!css!less!bootstrap/less/bootstrap.less");
// => the file "bootstrap.less" in the folder "less" in the "bootstrap"
//    module (that is installed from github to "node_modules") is
//    transformed by the "less-loader". The result is transformed by the
//    "css-loader" and then by the "style-loader".
//    If configuration has some transforms bound to the file, they will not be applied.

コンフィギュレーション
構成の正規表現でloaderをバインドできます.

{
    module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // => "jade" loader is used for ".jade" files

            { test: /\.css$/, loader: "style!css" },
            // => "style" and "css" loader is used for ".css" files
            // Alternative syntax:
            { test: /\.css$/, loaders: ["style", "css"] },
        ]
    }
}

CLI
CLIバインドloadersで拡張できます.

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

クエリーのパラメータ
Loaderはクエリー文字列(webに似ている)を通じてパラメータを渡すことができ、クエリー文字列はloaderの後ろに追加され、中間的に使用されますか?接続.例:url-loader?mimetype=image/png.
注:クエリー文字列のフォーマットはloaderに依存します.ほとんどのloaderは、通常のクエリー文字列(?key=value&key 2=value 2 ) JSON （?{"key":"value","key 2":"value 2"}`)を受信します.
in require

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

コンフィギュレーション

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

CLI

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