webpack-dev-server hot reload not working

Question

My file structure is:

dist
  css
    style.css
  index.html
  js
    bundle.js
src
  css
    style.css
  index.html
  js
    main.js
node_modules
webpack.con         


        

Answer 1

Webpack hot reloading stopped working for me as well. The solution for me was to delete the node_modules folder and fresh install all dependencies. Just open the parent folder of node_modules in your terminal and run npm install

Answer 2

You can try adding this to your config:

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

Answer 3

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

Answer 4

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.

Answer 5

Try this:

In your package.json file, delete the line that contains "test" "echo \"Error: no test specified\" && exit 1" under the scripts object, and replace it with:

...
"scripts": {
    "start": "webpack-dev-server --hot"
  },

...

Then to restart your project, just use npm start.

This worked for me when I ran into this problem.

Edit: Can you share your package.json file?

Try adding this to webpack.config.js as well

devServer: {
  inline: true,
  port: 3000,
  hot: true
},

Answer 6

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.