search
LoginSignup
16

More than 3 years have passed since last update.

posted at

updated at

webpackちゃんと理解しとこ loader編

※ これは古い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オブジェクトで渡す

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
16