webpackの開発環境でjpgが表示されない

webpackの開発環境でjpgが表示されず困っています。
index.htmlを直接ブラウザで読み込むと画像が表示されるのですが、
webpackにてnpm run dev(開発環境での立ち上げ)を行うと画像が表示されなくなってしまいます。

webpackを介さない場合表示がされるのでパスやファイル名は正しいと考えており、
webpackの設定に何か問題があると思っていますが原因がググっても分からずにおります。

以下webpack.common.js及びindex.html,package.jsonのコードを貼り付けさせていただきます。
アドバイスいただけますと幸いです。

【環境】
・macOS Big Sur 11.4
・Google Chrome
バージョン: 91.0.4472.114（Official Build）（x86_64）

webpack
1const CopyWebpackPlugin = require('copy-webpack-plugin')
2const HtmlWebpackPlugin = require('html-webpack-plugin')
3const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
4const path = require('path')
5
6module.exports = {
7    entry: path.resolve(__dirname, '../src/script.js'),
8    output:
9    {
10        filename: 'bundle.[contenthash].js',
11        path: path.resolve(__dirname, '../dist')
12    },
13    devtool: 'source-map',
14    plugins:
15    [
16        new CopyWebpackPlugin({
17            patterns: [
18                { from: path.resolve(__dirname, '../static') }
19            ]
20        }),
21        new HtmlWebpackPlugin({
22            template: path.resolve(__dirname, '../src/index.html'),
23            minify: true
24        }),
25        new MiniCSSExtractPlugin()
26    ],
27    module:
28    {
29        rules:
30        [
31            // HTML
32            {
33                test: /.(html)$/,
34                use: ['html-loader']
35            },
36
37            // JS
38            {
39                test: /.js$/,
40                exclude: /node_modules/,
41                use:
42                [
43                    'babel-loader'
44                ]
45            },
46
47            // CSS
48            {
49                test: /.css$/,
50                use:
51                [
52                    MiniCSSExtractPlugin.loader,
53                    'css-loader'
54                ]
55            },
56
57            // Images
58            {
59                test: /.(jpg|png|gif|svg)$/,
60                use:
61                [
62                    {
63                        loader: 'file-loader',
64                        options:
65                        {
66                            outputPath: 'assets/images/',
67                        }
68                    }
69                ]
70            },
71
72            // Fonts
73            {
74                test: /.(ttf|eot|woff|woff2)$/,
75                use:
76                [
77                    {
78                        loader: 'file-loader',
79                        options:
80                        {
81                            outputPath: 'assets/fonts/'
82                        }
83                    }
84                ]
85            },
86            {
87              test: /.(glsl|frag|vert)$/,
88              use: ['glslify-import-loader', 'raw-loader', 'glslify-loader']
89           },
90        ]
91    }
92}
93

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="preconnect" href="https://fonts.googleapis.com">
7    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
9    <link rel="stylesheet" href="style.css">
10    <title>24 - Shaders</title>
11</head>
12<body>
13  <div class="kingyo">
14    <figure class="fish-image img_box">
15      <img class="img" alt="fish" src="./fish.jpg">
16    </figure>
17    <h2 class="description">kingyo</h2>
18  </div>
19  <div class="forest">
20    <figure class="forest-image img_box"> 
21      <img class="img" alt="forest" src="./forest.jpg">
22    </figure>
23    <h2 class="description">atmosphere</h2>
24  </div>
25  <div class="shop">
26    <figure class="shop-image img_box">
27      <img class="img" alt="shop" src="./shop.jpg">
28    </figure>
29    <h2 class="description">shop</h2>
30  </div>
31    
32    <canvas class="webgl"></canvas>
33</body>
34</html>

json
1{
2  "repository": "#",
3  "license": "UNLICENSED",
4  "scripts": {
5    "build": "webpack --config ./bundler/webpack.prod.js",
6    "dev": "webpack serve --config ./bundler/webpack.dev.js"
7  },
8  "dependencies": {
9    "@babel/core": "^7.14.3",
10    "@babel/preset-env": "^7.14.2",
11    "babel-loader": "^8.2.2",
12    "clean-webpack-plugin": "^3.0.0",
13    "copy-webpack-plugin": "^9.0.0",
14    "css-loader": "^5.2.6",
15    "dat.gui": "^0.7.7",
16    "file-loader": "^6.2.0",
17    "html-loader": "^2.1.2",
18    "html-webpack-plugin": "^5.3.1",
19    "mini-css-extract-plugin": "^1.6.0",
20    "portfinder-sync": "0.0.2",
21    "style-loader": "^2.0.0",
22    "three": "^0.129.0",
23    "webpack": "^5.38.0",
24    "webpack-cli": "^4.7.0",
25    "webpack-dev-server": "^3.11.2",
26    "webpack-merge": "^5.7.3"
27  },
28  "devDependencies": {
29    "dat": "^13.13.1",
30    "glslify-import-loader": "^0.1.2",
31    "glslify-loader": "^2.0.0",
32    "gsap": "^3.6.1",
33    "raw-loader": "^4.0.2"
34  }
35}

Lhankor_Mhy

2021/06/24 02:05

画像は、assets/images/ にあるということでいいのですよね？その場合、「index.htmlを直接ブラウザで読み込む」というやり方だと画像が表示されないのではないかな、と思うのですが、「index.htmlを直接ブラウザで読み込む」の具体的な手順を教えていただけますか？

TAKASHIARAKI

2021/06/24 02:26

Lhankor_Mhy様コメントありがとうございます！また入れ違いで大変申し訳ありません。自己解決いたしました。 webpackの設定がおかしかったようで、webpack5の記述に直したら無事表示がされました。お手数をおかけして申し訳ありませんでした。

Lhankor_Mhy

2021/06/24 02:30

ご解決されて何よりです。

行動規範の内容に同意します

回答1件

自己解決

Webpack5の記述方法に変更することで解決しました。

javascript
1// Images
2            {
3                test: /.(jpg|png|gif|svg)$/,
4                type: 'asset/resource',
5                generator:{
6                  filename:'images/[name][ext]'
7                },
8                use:
9                [
10                    // {
11                    //     loader: 'file-loader',
12                    //     options:
13                    //     {
14                    //         outputPath: 'assets/images/',
15                    //     }
16                    // }
17                ]
18            },