web制作(デザインからコーディングまでワンストップ)の仕事のご依頼をいただくことがしばしばでてきたので
なんとなく半年ほど前からwebpackを使用しているわけですが
特に最近お請したご依頼では納期にそれほど拘らないといっていただいているので色々と試しています。

それでcssのurl(ローカルの場合はファイルパス)に関してちょっとした懸案事項になっていて、
file loaderを使ってみようという感じで取り組んでいたのですがなんだかおかしい。

前提としてcssやscssのloader、minifyするpluginを入れています。

画像は設定したファイルパスにコピーされているが
cssのurlを見るとそこのは繋がれておらず、ハッシュ値のファイル名に指定されている。
urlパスにもファイルはありますが中身はカラ。よって何も表示されない。


基本的に新人、さらにいうなら門外漢ですから想像がつかない。
dev serverのせいか、、、いやloaderとかpluginか、、、
そもそもなんでハッシュ値のファイル名の画像が出力されそしてそこにパスが指定されるんだ、、、、

で、調べたらありました。
これはwebpack5から実装されたasset modulesって機能なんですね
つまり、旧来のwebpackにはない機能(多分)。
で、さらに掘っていってわかったんですがasset modulesを使えば
file loaderを使うような画像のパス指定なども設定できるとのこと。
で実際にできました。
てことは、file loaderをインストールすることはなかったようです。

※しかし、逆にいうとfile loaderを生かしてasset modulesを切ることはできないのかと
雑に調べたがよくわかりませんでした。

最新版の機能なので割と情報が更新されていない場合が多いのかもなんて
思いましたが、皆さんはあまり5を使ってないんですかね。
それとも、そもそもwebpack自体がメインに使われる感じじゃないんですかね。
まー、いずれにしろとりあえず、これで始めているので中断する余地はありません。
なぜなら独学・新人ゆえに選択肢のレンジが狭いからです 笑