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.config.js
package.json

My webpack.config.js looks like:

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: __dirname,
        filename: './dist/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
};

I run:

webpack-dev-server --content-base dist --hot

And it builds and seems like it's working. localhost:8080 shows the expected result but hot-reload does just not work. When I change a file I can see in terminal that a rebuild is happening but nothing happens in the browser. Am I missing something in the config?

Answer 1

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 2

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 3

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.

Answer 4

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 5

I increased the max number of file changes that can be watched and it worked for me. I guess the issue for me was too many files.

echo fs.inotify.max_user_watches=1999999 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

source

Answer 6

Check your console logs if it has below error then add cors to your webpack dev server file

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin react hot reload

Ideally add below entry in you dev server js

headers: { "Access-Control-Allow-Origin": "*" },