はじめに

現在、大学の研究室サイトを作成しています。（初めてのWeb開発中）
そこで、今回は、作成中に困ったことを、備忘録として記事にします。
具体的な内容として、HTMLでimg要素に指定した画像がローカルサーバーで表示されなかったことについて、解決までの流れを説明します。

エラーが発生した状況

1 . フォルダ構成
フォルダ構成は以下のようになっています。

university-lab-site/
├─ .vscode
├─ dist
├─ node_modules
├─ src/
│  ├─ assets
│  │  ├─ fonts
│  │  └─ images/
│  │     └─ img1.jpg
│  ├─ scripts/
│  │  └─ main.js
│  ├─ styles/
│  │  └─ main.css
│  ├─ index.js
│  └─ index.html
├─ .gitignore
├─ package-lock.json
├─ package.json
└─ webpack.config.js

2. HTMLの編集
HTMLのimg要素のsrc属性値に相対パスで表示したい画像ファイルを指定。

index.html

<!DOCTYPE html>
<html lang="ja">
 <head>
     <meta charset="UTF-8">
     <-- 以下省略 -->
 </head>
<body>
    <main>
        <div class="main-visual">
            <img src="assets/images/img1.jpg" alt="メイン画像">
        </div>
    </main>
</body>
</html>

3. webpack-dev-serverを用いて確認
npm startコマンドでローカルサーバーを立ち上げます。

【結果】
画像は表示されず、alt属性値に設定したテキストのみ表示される

エラーが発生した原因

webpack-dev-serverによって提供されるファイルのディレクトリの指定が間違っている

画像が表示されない時の設定

webpack.config.js

devServer: {
    static: {
        directory: path.join(__dirname, 'dist')
    },
    compress: true,
    port: 9000,
    open: true,
}

※devServerオブジェクト内の、staticオブジェクトにある、directoryプロパティのjoinメソッドの引数にdistが指定されている。しかし、distフォルダの役割はビルドプロセスによって生成される出力ディレクトリである。

エラーの解決方法

webpack-dev-serverによって提供されるファイルのディレクトリの指定を変更する

画像が表示された時の設定

webpack.config.js

devServer: {
    static: {
        directory: path.join(__dirname, 'src')
    },
    compress: true,
    port: 9000,
    open: true,
}

※devServerオブジェクト内の、staticオブジェクトにある、directoryプロパティのjoinメソッドの引数にsrcを指定する。ここで、srcディレクトリは、HTML、JavaScript、CSS、画像などが格納されている。

ポイント
devServer.static.directoryは、webpack-dev-serverが静的ファイルを提供するためのルートディレクトリ。
distフォルダを指定すると、ビルド後のファイルがない限り、画像や静的ファイルは提供されない。
srcフォルダを指定すると、ソースファイルを直接提供するため、画像が表示される。

まとめ

今回は、localhost上（ローカルサーバーを立ち上げた時）に画像が表示されない問題について、研究室サイトを作成している最中に発生したため、解決までの流れを説明させていただきました。
初めて技術記事を書いたのですが、Markdown形式に少し戸惑い気味でレイアウトに改善する余地が多少あったり、自分なりに理解しやすい構成を考えて、表現する難しさを体感することができました。さらに、技術記事を書けるように、日々取り組んでいきたいです。

webpack.config.jsの設定エラーについて