【webpack】「loader(ローダー)」について

ローダーとは？

CSSや画像等のJavaScript以外のアセット等をJavaScriptとして扱うためのwebpackの機能です。

ローダーの種類

• cssローダー
• styleローダー
• urlローダー
• fileローダー
• saasローダー
• babelローダー
• eslintローダー

cssローダー

cssをモジュールバンドルに組み込むためのローダーになります。

styleローダー

モジュールにバンドルされたcssのスタイルを実際に適用するためのローダーです。

urlローダー

画像ファイルをモジュールバンドルに組み込むためのローダーになります。ただしそのまま使うと画像ファイル名がbase64で送信することになるのでそれを埋め込むHTMLは膨大なサイズになり初期表示時のパフォーマンスに影響が出る可能性があります。その場合は後述するfileローダーと組み合わせて使いbase64形式ではない通常の我々に親しみがあるような画像ファイル名をHTMLに埋め込むことで対処したりします。

fileローダー

一定の閾値を超える画像ファイル等を読み込む際は並列処理をしてくれるのでパフォーマンスをあげることが可能です。

sassローダー

sassをモジュールバンドルに組み込むためのローダーになります。

babelローダー

トランスコンパイラであるbabelをモジュールバンドルに導入できます。

eslintローダー

JavaScriptで最も利用されているリンターを導入します。eslintによる静的なソース解析をリアルタイムに実行させることができるようになります。