Tengo un problema con la configuración de mi Webpack. Después de escribir la etiqueta, aparece la imagen, pero devServer elimina todas las imágenes después de que las aplicaciones de estilos se recargan inmediatamente después de la página. Y no volvería hasta que la ruta se agregara nuevamente en la etiqueta. Vea este video de captura de pantalla para tener una mejor imagen de lo que está sucediendo .

webpack.config.js:

 const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') let mode = 'development' let target = 'web' if (process.env.NODE_ENV === 'production') { mode = 'production' target = 'browserslist' } const plugins = [ new HtmlWebpackPlugin({ template: './index.html', }), new MiniCssExtractPlugin({ filename: '[name].[contenthash].css', }), ] module.exports = { mode, plugins, target, context: path.resolve(__dirname, 'src'), entry: { main: './main.js', }, output: { path: path.resolve(__dirname, 'dist'), assetModuleFilename: 'assets/[hash][ext][query]', clean: true, }, optimization: { splitChunks: { chunks: 'all', }, }, devServer: { static: { directory: path.join(__dirname, 'src'), }, compress: true, open: true, hot: true, port: 3001, }, resolve: { extensions: ['.js', '.ts', '.jsx', '.tsx'], }, module: { rules: [ { test: /\.(html)$/, use: ['html-loader'], }, { test: /\.(s[ac]|c)ss$/i, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], }, { test: /\.(png|jpe?g|gif|svg|webp|ico)$/i, type: mode === 'production' ? 'asset' : 'asset/resource', }, { test: /\.(woff2?|eot|ttf|otf)$/i, type: 'asset/resource', }, { test: /\.(js|jsx)?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { cacheDirectory: true, }, }, }, { test: /\.(ts|tsx)?$/, exclude: /node_modules/, use: { loader: 'ts-loader', }, }, ], }, }