javascript - 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

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.