webpackでcssに記述されているimgのURL問題を解決する方法

こんにちは！
個人開発者の南です！

今回は、webpackでcssをコンパイルした時にcssの中に下記のような形で画像を読み込んでいる場合どうすればいいかについての解決方法を紹介します。

ちなみに、cssをwebpackでコンパイルするには「css-loader」を使います。

file-loaderのインストール

では、実際に「file-loader」をインストールしていきます。

file-loaderをインストールする場合は、まずはターミナルでインストールするファイルのトップディレクトリに移動します。

移動ができたら、下記のコマンドを実行しましょう。

上記のコマンドを実行すると、下記のようにfile-loaderがインストールされます。

これでfile-loaderのインストールは完了です。

webpackの設定ファイルへ追記

file-loaderのインストールが完了したら、今度はwebpackの設定ファイルである「webpack.config.js」にfile-loaderの設定を反映していきます。

具体的には、下記のコードを設定ファイルに書き込みます。

設定ファイルによって、他にも色々追加していると思いますが、だいたい下記のような感じになると思います。

これでfile-loaderを使うための準備ができました。

実際の動作を確認

では、最後に実際の動作を確認していきます。

まずはimgディレクトリを作成して、その中に適当な画像を「png」形式で入れましょう。

僕は下記のようにしました。

「src/image/test-img.png」

ディレクトリと、画像ファイルが作れたら今度はCSSファイルを作成していきます。

CSSのディレクトリは下記のようにしました。

「src/css/app.css」

app.cssの中身は下記のようにします。

実際にファイルを作成していくと、下記のような感じになると思います。

では、最後にコンパイルをしていきます。

コンパイルする場合は、下記のコードを実行します。

すると、設定しているファイル部分に記述した「images」ディクレクトリが新しく追加され、そこに「src/images/」以下の画像が移動しています。

あとは、ブラウザを開いて画像が表示されているはずです。

まとめ

今回は、file-loaderの使い方について紹介しました。

file-loaderを使うことで、cssの中にある画像などのURL指定の問題を解決することができます。

この記事が僕と同じように悩むあなたの役に立てれば嬉しいです。