img-loader, file-loader, url-loader, resolve-url-loader の違い

webpack

紛らわしいのでまとめ。

img-loader

画像最小化のためのローダー。url-loaderfile-loader、または raw-loader と一緒に使用する。

file-loader

importrequire())したファイルを、個別ファイルとして出力ディレクトリに出力するローダー。

url-loader

importrequire())したファイルを、base64 URIに変換するローダー。

resolve-url-loader

StylusやSassにおいて、背景画像を指定する際などの url() のパスを、今それを書いてるファイルからの相対パスで記述できるようにする。

使いどころは、例えばStylusなどで他の node_modules などの生のCSSをimportする際に、その生CSSから相対パスで url() の指定がされてる場合。

通常、StylusやSassではimportの大元のファイルからの相対パスで記述しなければならない。つまり、階層の違うStylus / Sassのimportファイルにも、大元ファイルからの相対パスで指定しなければならない。

つまり、相対パスの記述のある生CSSをインポートした場合は、import元のファイルからの相対パスではないためエラーが発生してしまう。このとき resolve-url-loader を使うことで、この問題を解決できる。