LOG

webpack using loadersの訳

この記事はwebpackのusing loadersを訳した内容です。

作成日15/05/02

WHAT ARE LOADERS?

loaderはアプリケーションのファイルを変換するもので、パラメータとしてリソースファイルのソースを取り、新しいソースを返す関数(node.jsで実行)です。
例えば、CoffeeScriptやJSXのファイルをwebpackで利用できるようにするために、それらのファイルを変換したりします。

loaderの機能

  • チェーンすることができます。それらはパイプラインでリソースに適用されます。最後のloaderはJavaScriptが返されることを期待し、それ以外のloaderは任意のフォーマット(次のloaderに渡されるフォーマット)を期待します。
  • loaderは同期処理、非同期処理が出来ます。
  • loaderは全てnode.jsで動き、それらは最善です。
  • loaderはクエリパラメータを受け入れます。これはloaderに設定を渡すのに使えます。
  • loaderは設定のエクステンションや正規表現オブジェクトをバウンド出来ます。
  • loaderは公開することができ、npmでインストールすることが出来ます。
  • Normal modules can export a loader in addition to the normal main via package.json loader.
  • ↑標準のモジュールはloaderに加えて、package.json loaderを介して標準のmainをエクスポート出来ます?
  • loaderは設定にアクセスすることが出来ます。
  • プラグインはより多くの機能をloaderに与えます。
  • loaderは任意のファイルを追加することができます。
  • その他

もしloaderのサンプルに興味があるならLIST OF LOADERSを御覧ください

RESOLVING LOADERS

Loaders are resolved similar to modules. A loader module is expected to export a function and to be written in node.js compatible JavaScript. In the common case you manage loaders with npm, but you can also have loaders as files in your app.

タスク:↑モジュールを理解したあとで訳す

loaderの参照

loaderの名前は慣例的(命名規則)にXXX-loader(XXXはコンテキスト名)とします。例えばjson-loader。
※ 命名規則は必須ではありません。

loaderには「json-loader」といったように実際の名前で参照するか、「json」というようなショートハンド名で参照することが出来ます。

loaderの命名規則と検索の優先順位はwebpackのconfiguration APIの中のresolveLoader.moduleTemplatesに定義されています。

loaderの命名規則はrequire()で参照する際に特に便利です。下の使用方法を御覧ください。

loaderのインストール

loaderがnpm経由でインストール出来れば

$ npm install xxx-loader --save

もしくは

$ npm install xxx-loader --save-dev

USAGE

loaderを使う方法は複数あります。

  • reqireで明示的に使う方法
  • 設定ファイルで設定して使う方法
  • CLIで指定して使う方法

loaders in require

!!メモ!!
もし環境(node.jsやブラウザ)に依存しないようにしたいのであれば、これは出来るだけ使用せず設定ファイル(Configuration)を利用してください。

※ 設定ファイルの使い方は次のセクションに記載

reqireステートメントもしくはdefine、require.ensureでloaderを指定することが可能です。
loaderを「 ! 」を使ってリソースから離します。各パートはカレントディレクトリからの相対パスです。

require("./loader!./dir/file.txt");
// => dirディレクトリにあるfile.txtを変換するためにカレントディレクトリにある"loader.js"を使用します。

require("jade!./template.jade");
// "template.jade"ファイルを変換するために"jade-loader"を使用します。
// ("jade-loader"はnpmで"node_modules"にインストールされているものです)

require("style!css!less!bootstrap/less/bootstrap.less");
// => bootstrapモジュール(githubで"node_modules"にインストールされているものです)の中のlessディレクトリの中にある"bootstrap.less"は"less-loader"で変換されます。
// 変換されたファイルは"css-loader"で変換され、その後"style-loader"で変換されます。

Configuration

設定ファイルを使ってloaderを正規表現にバインドすることが出来ます。

{
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" },
// => "jade" loaderは".jade"ファイルに使用されます。
{ test: /\.css$/, loader: "style!css" },
// => "style"と"css" loaderは".css"ファイルに使用されます。
// ↓別の指定の仕方
{ test: /\.css$/, loaders: ["style", "css"] }
]
}
}

CLI

loaderをエクステンションにバインドすることが出来ます。

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

“jade” loaderは”.jade”ファイルに、”style”と”css” loaderは”.css”ファイルに使用します。

Query parameters

loaderクエリパラメータをクエリストリング(webのように)から受け取れます。
クエリストリングはloaderに「 ? 」を付けて添付されます。(url-loader?minetype=image/png)

メモ:クエリストリングのフォーマットはloader次第です。loaderのクエリストリングのフォーマットはloaderのドキュメントを見て下さい。
ほとんどのloaderが通常のクエリのフォーマット(?key=value&key2=value2)とJSONオブジェクト(?{“key”:”value”,”key2″:”value2″})を受け入れます。

in require

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

Configuration

{ 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"