【Webpack5】file-loaderを使った画像の読み込みがうまくいかない

前提・実現したいこと

Webpack5でWebサイトを作っています。HTMLテンプレートにejsを使用しているのですが、ejs内のimgタグで読み込んだ画像ファイルがうまく読み込めません。
また、画像の出力結果も意図した通りにならず原因が分からなくて困っています。
お知恵を貸していただけると嬉しいです。

該当のソースコード

ejs
1~~~
2<body>
3  <%- include('./pages/index.ejs') %>
4  <img src="./assets/images/slide01.png" alt="">
5</body>

webpack
1const path = require('path');
2const HtmlWebpackPlugin = require('html-webpack-plugin');
3const { VueLoaderPlugin } = require('vue-loader');
4
5module.exports = {
6  mode: "development",
7  devtool: "inline-source-map",
8  entry: "./src/index.js",
9  output: {
10    filename: "[name]-[chunkhash].js",
11    path: path.resolve(__dirname, "dist"),
12    clean: true,
13  },
14  devServer: {
15    contentBase: "./dist",
16  },
17  module: {
18    rules: [
19      {
20        test: /.scss$/,
21        use: [
22          "vue-style-loader",
23          {
24            loader: "css-loader",
25            options: {
26              url: false,
27            },
28          },
29          "sass-loader",
30        ],
31      },
32      {
33        test: /.vue$/,
34        use: ["vue-loader"],
35      },
36      {
37        test: /.js/,
38        use: ["babel-loader"],
39        exclude: (file) => /node_modules/.test(file) && !/.vue.js/.test(file),
40      },
41      {
42        test: /.ejs$/,
43        use: [
44          "html-loader", // loader for html files goes here
45          "ejs-plain-loader",
46        ],
47      },
48      {
49        test: /.(png|svg|jpe?g|gif)$/,
50        // type: "asset/inline",
51        loader: "file-loader",
52        options: {
53          name: "[name]-[contenthash].[ext]",
54          outputPath: "assets/images",
55        },
56      },
57    ],
58  },
59  plugins: [
60    new HtmlWebpackPlugin({
61      template: "./src/index.ejs",
62      filename: "index.html",
63      inject: "body",
64    }),
65    new VueLoaderPlugin(),
66  ],
67  // ES5(IE11等)向けの指定（webpack 5以上で必要）
68  target: ["web", "es5"],
69};

HTML
1// 1. typeに何も指定しない場合のHTML出力結果
2<body>
3  <h3>Hello!!</h3>
4  <img src="0f95f63ec4988ab855a7.png" alt="">
5  <script defer src="main-c3903753686d7d897e9d.js"></script>
6</body>
7
8// 2. type: "asset/inline"の場合のHTML出力結果
9<body>
10  <h3>Hello!!</h3>
11  <img src="data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiYXNzZXRzL2ltYWdlcy9zbGlkZTAxLWQyMDE4MzYzMDYwODc5OTlmODA5MDM5MzVjYjYzNzdkLnBuZyI7" alt="">
12  <script defer src="main-c3903753686d7d897e9d.js"></script>
13</body>

試したこと

type: "asset/inline"などで、typeを変えてみたりしました。
ですが、上記「HTML」ソース内1.の場合、optionsの内容にも関わらず、./dist直下に 0f95f63ec4988ab855a7.png が生成され、そちらを読み込んでいました。さらに、その0f95f63ec4988ab855a7.pngが中身がなく、エディタで確認してもエラーとなり当然サイトにも反映されません。

上記2の場合は、画像の出力結果は意図通り./dist/assets/images/内に[name]-[contenthash].[ext]の名前で出力されるのですが、今度はhtml内の参照が意図したパスではなく、 data:image~ となっているためかやはり読み込めていません。

Webpack自体触ったばかりなので画像の読み込み方自体間違っているかもしれません。
ただ、以前にも自分でloaderやパッケージを入れて構築した際は問題なく画像を読み込めたので、これ以上見当がつきません…。

宜しくお願いいたします。

補足情報（FW/ツールのバージョンなど）

json
1// package.jsonの一部
2"devDependencies": {
3    "@babel/core": "^7.13.8",
4    "@babel/preset-env": "^7.13.9",
5    "babel-loader": "^8.2.2",
6    "core-js": "^3.9.1",
7    "css-loader": "^5.1.1",
8    "ejs-plain-loader": "^1.4.1",
9    "file-loader": "^6.2.0",
10    "html-loader": "^2.1.1",
11    "html-webpack-plugin": "^5.3.0",
12    "mini-css-extract-plugin": "^1.3.9",
13    "regenerator-runtime": "^0.13.7",
14    "sass": "^1.32.8",
15    "sass-loader": "^11.0.1",
16    "style-loader": "^2.0.0",
17    "vue-loader": "^15.9.6",
18    "vue-template-compiler": "^2.6.12",
19    "webpack": "^5.24.4",
20    "webpack-cli": "^4.5.0",
21    "webpack-dev-server": "^3.11.2"
22  },

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

回答1件

自己解決

Webpack5より、追加のloader不要で画像の読み込みが可能になっているようでした(asset modules)。
そこにloaderをinstallしてしまっているせいで、2度コンパイルされるような現象が起こっていたと言えそうです。

画像部分を下記に変えたところうまくいきました。

{
  test: /.(png|svg|jpe?g|gif)$/,
  type: "asset/resource",
  generator: {
    filename: "./assets/images/[name]-[contenthash].[ext]"
  }
},

投稿2021/03/13 20:18

manape

総合スコア12

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！