Das WebPack-Bild wird nicht mit dem Dateiladeprogramm geladen

Question

Derzeit habe ich ein Webpack 5-Projekt, das ein paar SVG-Bilder und ein Hintergrundbild erfordert. Das SVG-Bild ist in der Datei template.html codiert. Auf das Hintergrundbild wird in der Datei style.css verwiesen. Wenn ich den Build ausführe, werden keine Bilder auf der Webseite erstellt. Sie bleiben in gehashter Form (auch wenn ich in Dateiladetests benutzerdefinierte Namen verwende).

Hier ist die aktuelle Webpack-Konfigurationsdatei:

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

module.exports = {
    entry: {
        index: './src/js/index.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: './src/template.html',
        }),
      ],
    devtool: 'inline-source-map',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'docs'),
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use:['style-loader','css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpe?g|gif)$/i,
                use: [
                    {
                      loader: 'file-loader',
                      options: {
                        name: '[name].[ext]',
                        outputPath: 'assets/images/'
                      }
                    }
                ]
            },
            {
                test:/\.html$/,
                use: [
                  'html-loader'
                ]
              },
        ],
    },
};

Hier ist ein Ausschnitt, der zeigt, wie SVG implementiert wird

<div class="studyTime">
      <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="clock">
      <div class="clock-face">
        <div class="core"></div>
        <div class="hand" id="hour-hand"></div>
        <div class="hand" id="min-hand"></div>
        <div class="hand" id="second-hand"></div>
      </div>
    </div>

Abschließend ist hier ein Bild des Programms, wie es erstellt wurde: Bildfehler beim Erstellen

Ich habe versucht, das Dateiladeformat zu verwenden und es zu entfernen. Meine Dateistruktur sieht so aus:

Dateistruktur

Ich erhalte keine Fehlermeldungen, das Bild erscheint im gebündelten Code, aber in gehashter Form und nicht auf der Live-Website.

Answer 1

你需要 html-loader 和 html webpack 插件。它会用散列名称重写您的 html 文件。

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: path.resolve(__dirname, './dist/js/index.html'),
      template: path.resolve(__dirname, './src/template.html')
    })
  ]

并将 svg 规则替换为

module: {
    rules: [
      {
       test: /\.svg/,
       type: 'asset'
     }
    ]
  }