webpack-dev-server hot reload not working

None of the options on this page worked for me. After changing the devServer section to:

devServer: {
    port: 8080,
    contentBase: ['./src', './public'], // both src and output dirs
    inline: true,
    hot: true
},

it worked.

When using webpack-dev-server, it builds all files internally and does not spit them out into your output path. Running webpack alone, without the dev server, does the actual compilation to disk. The dev server does everything in memory which speeds up re-compilation by a lot.

To fix your hot reload issue, set the content base to your source directory and enable inline-mode

Like so:

webpack-dev-server --content-base src --hot --inline

What worked for me is to write <script src="bundle.js"> and not <script src="dist/bundle.js"> in my index.html file.

// index.html
<script src="bundle.js"></script>      // works
<script src="dist/bundle.js"></script> // doesn't work!

Keeping dist/bundle.js as the output file works perfectly fine if you just build it using webpack. But when using webpack-dev-server, the static file already in the file system continues to be served, and not the latest hot replacement. It seems webpack-dev-server gets confused when it sees dist/bundle.js in the html file and doesn't hot replace it, even though webpack.config.js is configured to that path.