Webpack collecting wrong src path - reactjs

Question

I think that the whole problem is in configuring the webpack, the images are successfully collected in the folder when building, but when importing ...
Somewhere I found a solution indicating the public path, but somehow it did not grow together
webpack.config.js
const path = require('path');
// const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: { main: './src/lib/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: "umd",
library: "#compassplus/ui-mobicash"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: true,
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
],
include: /\.module\.css$/,
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
exclude: /\.module\.css$/,
},
{
test: /\.(png|jp(e*)g|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[hash:12].[ext]',
outputPath: 'images/',
esModule: false,
},
},
],
},
]
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'index.css',
}),
// new HtmlWebpackPlugin({
// template: './public/index.html',
// }),
// new webpack.ProvidePlugin({
// "React": "react",
// }),
],
externals: {
react: 'react',
},
resolve: {
extensions: ['.js', '.jsx'],
},
}
Путь указанный в src / Path in the src:
src="images/809853c38dec.svg"
In the React component, I hook it up via import and pass it as an object
import imgLight from './img/theme-light.svg';
<img src={img} alt='Картинка' className={style.img}></img>

Answer 1

Solved the problem using url-loader:
{
loader: "url-loader",
options: {
limit: 8192,
name: "static/media/[name].[hash:8].[ext]"
},
}