saving SCSS change causes webpack fail to load image file from HTML img tag (Webpack 5)

Question

I just get this problem recently , but I can't figure out what is wrong with my webpack setting.

Every time I save my SCSS files (./src/scss/) change, and webpack do refresh the page (it is hot module reload I guess), but after the refresh, my image (which should be loaded from html <img> tag) just disappear and return a 404 error.

This only happen when I save my files which are in the src/ folder, and if I save my html(which is not in ./src/ folder) right after saving src/ files change, the image just re-appear!

Any idea about how to fix this?(I am using webpack 5)

I have already tried every thing I found on the internet, like target:'web' or hot module reload setting blahblah...but nothing work .

My folder structure:

It's my webpack.config.js below:

const fs = require('fs');
const webpack = require('webpack');
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const NO_COMPRESS = false;

module.exports = {
  entry:{
    main:['./src/js/main.js','./src/scss/main.scss']
  },
  output: {
    filename: 'js/[name].[chunkhash].js',
    chunkFilename: '[id].[chunkhash].js',
    path: resolve(__dirname, 'build'),
    clean: true
  },
  target: 'web',
  devServer: {
    open: true,
    compress: true
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node-modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: !NO_COMPRESS
            }
          }
        ],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/images/[name][ext]'
        }
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../../'
            }
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: [
                  require('postcss-preset-env')()
                ]
              }
            }
          },
          (() => {
            return NO_COMPRESS ? {
              loader: 'sass-loader',
              options: { sourceMap: true, sassOptions: { minimize: false, outputStyle: 'expanded' } }
            } : 'sass-loader'
          })()

        ]
      },
      {
        test: /\.(otf|eot|ttf|woff2?)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[name][ext]'
        }
      }

    ]
  },
  resolve: {
    alias: {
      '@img': resolve(__dirname, './src/assets/images/'),
      '@font': resolve(__dirname, './src/assets/fonts/'),
      '@libimg': resolve(__dirname, 'node_modules/@neux/ui-jquery/img')
    }
  },
  optimization: {
    minimize: !NO_COMPRESS,
    splitChunks: { name: 'vendor', chunks: 'all' }
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  },
  plugins: [
    (() => {
      return NO_COMPRESS ? undefined : new OptimizeCssAssetsWebpackPlugin()
    })(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    new HtmlWebpackPlugin({
      filename:'index.html',
      template:'index.html'
    })

  ].filter(function (x) {
    return x !== undefined;
  })
}

My package.json:

{
  "name": "webpack-template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack --mode production",
    "dev": "npx webpack serve"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mizok/webpack-template.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/mizok/webpack-template/issues"
  },
  "homepage": "https://github.com/mizok/webpack-template#readme",
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^5.2.1",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.5.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "webpack": "^5.31.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "not dead",
    "IE 11"
  ]
}

index.html

Answer 1

I've encountered the same situation. The problem is in output.clean: true option.
You can remove it or set to false.

E.g. I've changed my start command in package.json like this
"start": "cross-env NODE_ENV=development NODE_LIVE=true webpack-dev-server --mode development"
and then check for process.env.NODE_LIVE in webpack.config.json like

const isDevserver = process.env.NODE_LIVE;

{
    ...
    output: {
        ...
        clean: !isDevserver
    },
    ...
}