Why does the page reload not work on any changes in the files?

Question

JavaScript

I started to study webpack, I ran into a problem that when changing files, the page does not reload in the browser, you always have to update it yourself.

webpack.common.js

const paths = require('./paths');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [paths.src + '/index.js'],
  output: {
    path: paths.build,
    filename: '[name].bundle.js',
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: paths.src + '/index.html',
    }),
  ],
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },
      {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: { sourceMap: true, importLoaders: 1 },
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true },
          },
        ],
      },
    ],
  },
};

webpack.dev.js

const paths = require('./paths');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',

  devtool: 'inline-source-map',

  devServer: {
    historyApiFallback: true,
    contentBase: paths.build,
    open: true,
    compress: true,
    hot: true,
    port: 8080,
  },

  plugins: [new webpack.HotModuleReplacementPlugin()],
});

paths.js

const path = require('path')

module.exports = {
  // Source files
  // Исходники
  src: path.resolve(__dirname, '../src'),

  // Production build files
  // Директория для файлов сборки
  build: path.resolve(__dirname, '../dist'),

  // Static files that get copied to build folder
  // Статические файлы, которые будут скопированы в директорию для файлов сборки
  public: path.resolve(__dirname, '../public'),
}

package.json

{
  "name": "excel",
  "version": "1.0.0",
  "description": "Pure JS Excel app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack serve --config config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rostik32/excel.git"
  },
  "keywords": [
    "js",
    "javascript",
    "excel"
  ],
  "author": "Rostislav Bardasshov <[email protected]>",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/rostik32/excel/issues"
  },
  "homepage": "https://github.com/rostik32/excel#readme",
  "browserslist": "> 0.25%, not dead",
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.7",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.3.2",
    "cross-env": "^7.0.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.9.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.4.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1"
  }
}

Answer 1

Perhaps because Hot Module Replacement is enabled, which replaces modules on the fly without reloading the page. This option is an alternative to a normal page reload, which is probably why the second one doesn't work.
Try disabling Hot Module Replacement.