Webpack don't generate images - html

Question

To be brief, here i have my webpack (below,i put the code concerned).
Actually, webpack create the image folder with an svg of the font, but not the svg images. (screenshot below)
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(sa|sc|c)ss$/,
exclude: /node_modules/,
use: [
'style-loader', // Creates `style` nodes from JS strings
'css-loader', // Translates CSS into CommonJS
'sass-loader', // Compiles Sass to CSS
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'image/'
}
}
]
},
{
test: /\.(woff(2)?|ttf|otf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'font/'
}
}
]
}
]
},
and here is my HTML :
<div class="cc-header__left">
<img src="image/LOGO.svg" alt="logo conseil constitutionnel" />
<p class="cc-header__logoName"> Élection présidentielle <span>2022</span></p>
</div>

Answer 1

You may try to install html-loader and add new loader to config
module: {
rules: [
// ...
{
test: /\.html$/i,
use: {
loader: 'html-loader',
}
}
]
}

Answer 2

i found this solution :
const importAll = require =>
require.keys().reduce((acc, next) => {
acc[next.replace("./", "")] = require(next);
return acc;
}, {});
const images = importAll(
require.context("./image", false, /\.(png|jpe?g|svg)$/)
);
i've added this code to my app.js