How to fix LiveReloada issue in Webpack?

Question

JavaScript

Help solve the problem. When changing js files with webpack-dev-server enabled in hmr mode, the page compiles as it should, but a blank page is displayed in the browser. You have to stop WDS and re-run the npm start script - in this case, the page is rendered as it should. What could be the problem?

webpack.config.js:

const CopyPlugin = require('copy-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

const jsLoaders = () => {
  const loaders = [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-proposal-class-properties']
      }
    }
  ]
  if (isDev) {
    loaders.push('eslint-loader')
  }
  return loaders
}

const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd

const filename = ext => isDev ? `bundle.${ext}` : `bundle.[hash].${ext}`

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: ['@babel/polyfill', './index.js'],
  output: {
    filename: filename('js'),
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@core': path.resolve(__dirname, 'src/core')
    }
  },
  devtool: isDev ? 'source-map' : false,
  devServer: {
    port: 3000,
    hot: isDev
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: 'index.html',
      minify: {
        removeComments: isProd,
        collapseWhitespace: isProd
      }
    }),
    new CopyPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, 'src'),
            to: path.resolve(__dirname, 'dist')
          }
        ]
      }
    ),
    new MiniCSSExtractPlugin({
      filename: filename('css')
    })
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: MiniCSSExtractPlugin.loader,
            options: {
              hmr: isDev,
              reloadAll: true
            }
          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: jsLoaders()
      }
    ]
  }
}

package.json:

{
  "name": "website",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@babel/polyfill": "^7.10.4"
  },
  "browserslist": ">0.25%, not dead",
  "devDependencies": {
    "@babel/core": "^7.11.0",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.0.3",
    "cross-env": "^7.0.2",
    "css-loader": "^3.6.0",
    "eslint": "^7.6.0",
    "eslint-config-google": "^0.14.0",
    "eslint-loader": "^4.0.2",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "sass": "^1.26.9",
    "sass-loader": "^8.0.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --open",
    "build": "cross-env NODE_ENV=production webpack --mode production"
  },
  "license": "ISC"
}

Answer 1

Background, if anyone is interested. Since I was taking a video course, for a better understanding, at a certain stage, I decided to copy-paste my project for the author in parallel. In the process, it turned out that when you run the npm start script, the browser opens and the result of the rendered page is displayed in the window, while everything is ok, but as soon as I change some kind of js file, the webpack compiles, gives the status ｢wdm｣: Compiled successfully., the page reloads and becomes absolutely empty. All the config code and package.json with dependencies are the same, I removed node_modules many times and reinstalled it with the npm install command, but in vain. The problem was solved when I tried to copy and replace the necessary files from the course project into my project and did not come to the conclusion that the problem was in the package-lock.json file. As soon as I took this file from the course and installed the dependencies, everything worked. As soon as the old package-lock.json file was returned, everything broke again. The problem is solved, but I still do not understand what the problem was. Explain, who faced or at least can have some thoughts on this matter. I will be grateful.