※ これは古いWebpackの情報です。(どのバージョンの話か忘れるぐらいには古い)
webpackで様々なものをbundle出来るようにするloaderについて、公式ドキュメントを読む。
http://webpack.github.io/docs/using-loaders.html
チュートリアル編 ← prev | next → 設定ファイル編
読んでメモとりたくなったところは以下に記載
Loader featuresの訳
- 連結することが出来て、パイプライン状にリソースに対して適用される。最期のloaderはJavaScript(のコード?)を返すことが期待され、それ以外は任意の形式を返していい。
- 同期的でもいいし、非同期でもいい
- nodeで出来ることはなんでもやっていい
- ローダを設定するためにクエリパラメータを受け付ける
- 設定で正規表現により拡張子と関連付けることができる
- npmとして公開されインストールできる
-
うまく訳せなかったNormal modules can export a loader in addition to the normal main via package.json loader. - 設定にアクセスできる (クエリパラメータのこと？ webpack.config.jsのこと？) Loaders can access the configuration.
-
プラグイン？Plugins can give loaders more features. - 追加で任意にファイルをうみだせる
まじかよ、もはやローダーの域こえてるだろこれ。
Referencing loaders
- 必須ではないけど慣例的に
XXX-loaderという名前がつけられている-
XXXはそのローダーの機能を表す
-
- ローダーは
XXX-loaderでもいいし、省略してXXXと表してもいい- たぶん命名規則にそっている限り
- この慣例はrequireするときとかに便利だよ
- あんまり重要そうには思えなかったけど、命名規則や検索の優先順位はwebpack configuration apiを通して変更できる模様
Usage
-
require(...)に直接指定- 明示的にと書いてあり、残りの方法が暗黙的なのと対になってる
- そして
Avoid using thisなのでオススメではないらしい -
require('./xxxx!module/name')-
xxxx.jsを探しに行く - 次の方法と対比するとキモイ気がする
-
-
require('xxxx!module/name')-
xxx-loader.jsを探しに行く
-
-
require("!style!css!less!bootstrap/less/bootstrap.less")- 後ろに書いてあるローダから仕事する
- configファイルに記載
-
/module/loaders[]に定義を追加していく- testプロパティとloaderかloadersプロパティを定義する
- testプロパティには正規表現オブジェクトを指定
- require()に指定された文字列をtestしてマッチするとローダが働く
- loaderにはrequire()に直接ローダを指定する場合の記法でローダを定義する
- loadersの場合は、配列でローダを一件ずつ定義する
- queryプロパティもあるが 後述
-
- CLI
-
--module-bindオプションに拡張子=ローダ定義の形式で指定する
-
qurey文字列
文字列の形式はローダごとに違うらしい。まじかよ。
とはいえ通常、url的なqueryパラメータか、json形式({"key":"value","key2":"value2"})を受け付けているらしい。
全部文字列でローダとともに指定する場合はloader?queryStringの形式。
configファイルではqueryプロパティにオブジェクトとして指定することもできる。
（が、loadersと併用できるかはここではわからなかった。
まとめ
- ローダって言う名前の機能だが実際はなんでもできる
- 名前は慣例的に
XXX-loaderであり特に問題がない限りしたがって命名すべき - requireで明示するか、設定ファイルに別記し暗黙的にローダを適用する
- 特に問題がない限り設定ファイルに書く
- loaderを外から設定するためにquery文字列を渡すことができ、通常webっぽいアレかJSONオブジェクトで渡す