webpack-dev-server hot reload not working

You can try adding this to your config:

```js
module.exports = {
...
devServer: {
contentBase: './dist/', // Since your index.html is in the "dist" dir
open: true, // Automatically open the browser
hot: true, // Automatically refresh the page whenever bundle.js changes
// (You will have to refresh manually if other files change)
},
...
};
```

And then running (no options):
`webpack-dev-server`

With the above settings, while using `webpack-dev-server` for static page building I add bundle js or whatever js file configured as output to the html page. This way I get refresh on my static page after any changes.

The only thing that works for me is apply the "[hotOnly][1]" inside the configuration of the "devServer" (on the "webpack.config.js"), like this:

devServer: {
hotOnly: true,
},

After reload the "Webpack Dev Server", the "Hot Reload" works, at least, after saving any change in CSS or JS files.


[1]:

[To see links please register here]

All those who suffer: don’t forget slash before public path:
`publicPath:’/assets/scripts/‘` not `publicPath:’assets/scripts/’`
Three days lost because of 1 forward slash in the path string

**For Webpack ^5.72.1**

This worked for me,

```
devServer: {
port: 3000,
hot: false,
liveReload: true,
},
```
Note: liveReload will reload the whole application on file save but it will lose application state. Hot reloading preserves state. But liveReload seemed to fix the issue for me with css/html not loading on the browser after save, without having to refresh the browser.

For webpack version 5, the module.loaders is now module.rules. And for the presets change query to options.

Make sure in development mode you are not using a plugin that extract css into files, example MiniCssExtractPlugin. It messes the things up.