WebPack image not loading using file loader

Question

Currently, I have a webpack 5 project that requires several svg images and a background image. The svg image is encoded into the template.html file. The background image is referenced in the style.css file. When I run the build, no images are built on the web page. They remain in hashed form (even if I use custom names in file loader tests.

The following is the current webpack configuration file:

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

The following is a snippet showing how svg is implemented

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

Finally, this is an image of the program when it was built: Image error while building

I've tried using the file loader format, as well as removing it. My file structure looks like this:

File structure

I don't get any errors, the image appears in the bundled code but in hashed form and does not appear in the live website.

Answer 1

You need html-loader and html webpack plugin. It will rewrite your html file with a hashed name.

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

and replace the svg rule with

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