title: Webpack devServer v. 4.x.x live reload not working
body: <p>I'm following these <a href="https://webpack.js.org/guides/development/" rel="nofollow noreferrer">webpack 5 guides</a>, and webpack-dev-server v4.3.1 does not live reload the sample project (a recompile does happen after editing either JavaScript file). Perhaps I have missed a step?</p>
  <p><strong>1. Can you tell me where the problem lies?</strong></p>
  <p>Here's my configuration:</p>
  <p><strong>package.json</strong></p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;components&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;private&quot;: true,
    &quot;devDependencies&quot;: {
      &quot;autoprefixer&quot;: &quot;^10.3.7&quot;,
      &quot;eslint&quot;: &quot;^7.32.0&quot;,
      &quot;eslint-config-airbnb-base&quot;: &quot;^14.2.1&quot;,
      &quot;html-loader&quot;: &quot;^2.1.2&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^5.3.2&quot;,
      &quot;postcss&quot;: &quot;^8.3.9&quot;,
      &quot;tailwindcss&quot;: &quot;^2.2.16&quot;,
      &quot;webpack&quot;: &quot;^5.58.1&quot;,
      &quot;webpack-cli&quot;: &quot;^4.9.0&quot;,
      &quot;webpack-dev-middleware&quot;: &quot;^5.2.1&quot;,
      &quot;webpack-dev-server&quot;: &quot;^4.3.1&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;webpack serve --open&quot;,
    },
    &quot;repository&quot;: {
      &quot;type&quot;: &quot;git&quot;,
      &quot;url&quot;: &quot;components&quot;
    },
    &quot;author&quot;: &quot;Karl&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;lodash&quot;: &quot;^4.17.21&quot;
    }
  }
  </code></pre>
  <p><strong>webpack.config.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
      mode: 'development',
    entry: {
      index: './src/index.js',
      print: './src/print.js',
    },
    devServer: {
      static: { 
              directory: './dist',
              watch: true
          },
    },
      plugins: [
      new HtmlWebpackPlugin({
        title: 'Output Management',
      }),
    ],
      output: {
      filename: '[name].bundle.js',
          path: path.resolve(__dirname, 'dist'),
          clean: true,
      }
  };
  </code></pre>
  <p>Below is the result of running the npm start script (the 2 files in ./src, index.js and the print.js, are copied from the above linked guide). If I edit either file, live reload does not work, but after manually refreshing the browser the edits are reflected.</p>
  <p><a href="https://i.stack.imgur.com/RVZKa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RVZKa.png" alt="enter image description here" /></a></p>
  <p>If it matters, the above is from VS Code's Bash terminal, and I'm running Windows 10.</p>
  <p><strong>2) BONUS: What configuration changes do I need to make in order to live reload a static index.html file located in the project's root folder?</strong></p>