title: webpack-dev-server Hot Module Replacement does not work and the whole app is refreshed
body: <p>I didn't come up with this configuration, searched the internet but couldn't find anything useful. My issue is that every changes refreshes the entire page, like F5, instead of hot reloading.
  I've tried:</p>
  <ul>
  <li>adding <code>inline</code> and <code>hot</code> to <code>devServer</code></li>
  <li>adding <code>--inline</code> and <code>--hot</code> to <code>webpack-dev-server</code> command</li>
  <li>set content base in <code>webpack-dev-server</code> command</li>
  </ul>
  <p>None worked. Everytime I make a change I have to wait 10s for the whole page to refresh. Please help. Here's the config</p>
  <p>webpack.common.js</p>
  <pre><code>const DotEnvWebpack = require('dotenv-webpack');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const PreloadWebpackPlugin = require('preload-webpack-plugin');
  const LodashWebpackPlugin = require('lodash-webpack-plugin');
  const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  
  const appPath = require('./app-path.config');
  
  //
  // ────────────────────────────────────────────────────── I ──────────
  //   :::::: P L U G I N S : :  :   :    :     :        :          :
  // ────────────────────────────────────────────────────────────────
  //
  
  const loadEnv = new DotEnvWebpack();
  const reduceLodash = new LodashWebpackPlugin();
  const reduceMomentLocales = new MomentLocalesPlugin();
  
  const extractCss = new MiniCssExtractPlugin({
    filename: '[name].[hash:8].css',
    ignoreOrder: true,
  });
  
  const buildIndexHtml = new HtmlWebpackPlugin({
    template: appPath.template,
  });
  
  const preloadWebpackPlugin = new PreloadWebpackPlugin({
    rel: 'preload',
    include: [
      'profile',
    ],
  });
  
  const copyAssets = new CopyWebpackPlugin({
    patterns: [
      {
        from: 'src/assets',
        to: 'src/assets',
      },
      {
        from: 'manifest.webmanifest',
        to: 'manifest.webmanifest',
      },
    ],
  });
  
  //
  // ──────────────────────────────────────────────────────────────── I ──────────
  //   :::::: M O D U L E   R U L E S : :  :   :    :     :        :          :
  // ──────────────────────────────────────────────────────────────────────────
  //
  
  const processJs = {
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader'],
  };
  
  const processLessInSrc = {
    test: /\.less$/,
    include: appPath.sourceDir,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          hmr: process.env.NODE_ENV !== 'production',
        },
      },
      {
        loader: 'css-loader',
        options: {
          localsConvention: 'camelCase',
          modules: {
            localIdentName: '[local]_[hash:base64:6]',
          },
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            plugins: [
              [
                'autoprefixer',
              ],
            ],
          },
        },
      },
      {
        loader: 'less-loader',
      },
      {
        loader: 'style-resources-loader',
        options: {
          patterns: appPath.stylesResource,
        },
      },
    ],
  };
  
  const processLessInAntDesign = {
    test: /\.less$/,
    include: /antd.*\.less$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      {
        loader: 'less-loader',
        options: {
          lessOptions: {
            modifyVars: {
              'primary-color': '#202020',
              'border-radius-base': '6px',
            },
            javascriptEnabled: true,
          },
        },
      },
    ],
  };
  
  const processCssInLibs = {
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
      },
      {
        loader: 'css-loader',
      },
    ],
  };
  
  const processSvg = {
    test: /\.svg$/,
    use: [
      'babel-loader',
      'react-svg-loader',
    ],
  };
  
  //
  // ────────────────────────────────────────────────────────────────── I ──────────
  //   :::::: C O N F I G U R A T I O N : :  :   :    :     :        :          :
  // ────────────────────────────────────────────────────────────────────────────
  //
  
  module.exports = {
    entry: appPath.render,
    output: {
      path: appPath.publicDir,
      filename: '[name].[hash:8].js',
      chunkFilename: '[name].[hash:8].js',
    },
    module: {
      rules: [
        processJs,
        processLessInSrc,
        processLessInAntDesign,
        processCssInLibs,
        processSvg,
      ],
    },
    node: {
      fs: 'empty',
    },
    optimization: {
      usedExports: true,
      splitChunks: {
        cacheGroups: {
          react: {
            name: 'react',
            test: /[\\/]node_modules[\\/]((react|react-dom).*)[\\/]/,
            chunks: 'all',
          },
          antd: {
            name: 'antd',
            test: /[\\/]node_modules[\\/]((antd|@ant-design).*)[\\/]/,
            chunks: 'all',
          },
          firebase: {
            name: 'firebase',
            test: /[\\/]node_modules[\\/]((@firebase).*)[\\/]/,
            chunks: 'all',
          },
          heavy_libs: {
            name: 'heavy_libs',
            test: /[\\/]node_modules[\\/]((@sentry|moment|html2canvas|react-qr-reader).*)[\\/]/,
            chunks: 'all',
          },
          rest_libs: {
            name: 'rest_libs',
            minChunks: 2,
            test: /[\\/]node_modules[\\/]((?!react|react-dom|antd|@ant-design|@firebase|@sentry|moment|html2canvas|react-qr-reader).*)[\\/]/,
            chunks: 'all',
          },
        },
      },
    },
    plugins: [
      loadEnv,
      reduceLodash,
      reduceMomentLocales,
      extractCss,
      buildIndexHtml,
      preloadWebpackPlugin,
      copyAssets,
    ],
  };
  </code></pre>
  <p>webpack.dev.js</p>
  <pre><code>const DotEnvWebpack = require('dotenv-webpack');
  const WebpackMerge = require('webpack-merge');
  const common = require('./webpack.common');
  
  const loadEnv = new DotEnvWebpack({
    path: './.env.dev',
  });
  
  module.exports = WebpackMerge(common, {
    devtool: 'inline-source-map',
    mode: 'development',
    devServer: {
      port: 3000,
      open: true,
      historyApiFallback: {
        disableDotRule: true,
      },
    },
    plugins: [
      loadEnv,
    ],
  });
  </code></pre>
  <p>package.json</p>
  <pre><code>&quot;start&quot;: &quot;webpack-dev-server --config config/webpack.dev.js&quot;,
  ...
  &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;,
  
  </code></pre>