Instalé el cargador de archivos y el cargador de URL, y agregué lo siguiente a la configuración de mi paquete web

 { test: /\.(png|jpg|gif)$/, use: [{ loader: 'file-loader', options: {} }] }, { test: /\.(png|jpg|gif)$/, use: { loader: 'url-loader', }, },

a continuación es mi html

 <img src="../src/assets/laughing.svg">

error de consola después de npm run dev

Error al cargar el recurso: el servidor respondió con un estado de 404 (No encontrado)

Soy nuevo en webpack, no estoy seguro de lo que estoy haciendo mal aquí... Configuración completa:

 const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: { bundle: path.resolve(__dirname, 'src/index.js'), }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name][contenthash].js', clean: true, assetModuleFilename: '[name][ext]', }, devtool: 'source-map', devServer: { static: { directory: path.resolve(__dirname, 'dist'), }, port: 3000, open: true, hot: true, compress: true, historyApiFallback: true, }, module: { rules: [ { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, { test: /\.(png|jpg|gif)$/, use: [{ loader: 'file-loader', options: {} }] }, { test: /\.(png|jpg|gif)$/, use: { loader: 'url-loader', }, }, ], }, plugins: [ new HtmlWebpackPlugin({ title: 'Webpack App', filename: 'index.html', template: 'src/index.html', }), new HtmlWebpackPlugin({ title: 'Webpack App', filename: 'about.html', template: 'src/about.html', }), ], }

¿Algúna idea de cómo arreglar esto?

La imagen funciona cuando no estoy ejecutando npm run dev. Entonces img src debe ser correcto.