現在、いくつかの SVG イメージと背景イメージを必要とする webpack 5 プロジェクトがあります。 svg イメージは template.html ファイルにエンコードされます。背景画像は style.css ファイルで参照されます。ビルドを実行すると、Web ページ上にイメージがビルドされません。ファイル ローダー テストでカスタム名を使用した場合でも、それらはハッシュされた形式のままです。

以下は現在の Webpack 構成ファイルです:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    エントリ: {
        インデックス: './src/js/index.js',
    }、
    プラグイン: [
        new HtmlWebpackPlugin({
          テンプレート: './src/template.html',
        })、
      ]、
    開発ツール: 'インラインソースマップ',
    出力: {
        ファイル名: 'bundle.js',
        パス: path.resolve(__dirname, 'docs'),
    }、
    モジュール: {
        ルール: [
            {
                テスト: /\.css$/i、
                use:['style-loader','css-loader'],
            }、
            {
                テスト: /\.(png|svg|jpg|jpe?g|gif)$/i,
                使用： [
                    {
                      ローダー: 'ファイルローダー',
                      オプション: {
                        名前: '[名前].[拡張子]',
                        出力パス: 'assets/images/'
                      }
                    }
                】
            }、
            {
                テスト:/\.html$/、
                使用： [
                  「htmlローダー」
                】
              }、
        ]、
    }、
};

以下は svg がどのように実装されるかを示すスニペットです

<div class="学習時間">
      <div id="timeManager">
        <div id="toDoButtons">
          <button id="new"><img src="./assets/images/add.svg" alt=""></button>
          <button id="clear"><img src="./assets/images/clear.svg" alt=""></button>
        </div>
        <div id="todo">

        </div>
      </div>
      <img class="openDrawer" id="timeOpen" src="./assets/images/left.svg" alt="">
    </div>
    <div class="時計">
      <div class="文字盤">
        <div class="core"></div>
        <div class="針" id="時針"></div>
        <div class="hand" id="min-hand"></div>
        <div class="hand" id="中古品"></div>
      </div>
    </div>

最後に、これはプログラムが構築されたときのイメージです。

ファイルローダー形式を使用したり、削除したりしてみました。私のファイル構造は次のようになります:

ファイル構造

エラーは発生しません。画像はバンドルされたコードに表示されますが、ハッシュされた形式であり、実際の Web サイトには表示されません。