L'image WebPack ne se charge pas à l'aide du chargeur de fichiers

Question

Actuellement, j'ai un projet webpack 5 qui nécessite quelques images svg et une image d'arrière-plan. L'image svg est codée dans le fichier template.html. L'image d'arrière-plan est référencée dans le fichier style.css. Lorsque j'exécute la build, aucune image n'est créée sur la page Web. Ils restent sous forme hachée (même si j'utilise des noms personnalisés dans les tests du chargeur de fichiers.

Voici le fichier de configuration actuel du webpack :

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'
                ]
              },
        ],
    },
};

Voici un extrait montrant comment SVG est implémenté

<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>

Enfin, voici une image du programme tel qu’il a été construit : Erreur d'image lors de la construction

J'ai essayé d'utiliser le format de chargement de fichiers et de le supprimer. La structure de mes fichiers ressemble à ceci :

Structure des fichiers

Je ne reçois aucune erreur, l'image apparaît dans le code fourni mais sous forme hachée et n'apparaît pas sur le site Web en direct.

Answer 1

Vous avez besoin d'un chargeur HTML et d'un plugin HTML Webpack. Il réécrira votre fichier HTML avec un nom haché.

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

et remplacez la règle svg par

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