Estoy usando webpack 5 con html-loader, tengo un problema, las imágenes src en archivos html no funcionan.

en primer lugar, aquí está mi árbol de proyectos

dist => index.html

src => activos => imágenes => logo.jfif

Aquí está mi código webpack.config.js

 const path = require('path'); module.exports = { entry: './src/index.js', mode: 'development', devServer: { static: './dist', }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), assetModuleFilename: 'assets/images/[hash][ext][query]', }, module: { rules: [ { test: /\.html$/i, loader: 'html-loader', }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, { test: /\.(png|svg|jpg|jpeg|gif|jfif)$/, type: 'asset/resource', }, { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-object-rest-spread'], }, }, }, ], }, };

y aquí está mi etiqueta img en el archivo index.html

 <img src="assets/images/logo.jfif"/>

Sé que recibo 404 Imagen no encontrada