紛らわしいのでまとめ。
img-loader
画像最小化のためのローダー。url-loader
、file-loader
、または raw-loader
と一緒に使用する。
file-loader
import
(require()
)したファイルを、個別ファイルとして出力ディレクトリに出力するローダー。
url-loader
import
(require()
)したファイルを、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
を使うことで、この問題を解決できる。