React & Webpack Dev Server: Hot Reloading not working

Question

I've got a React app with a fairly simple Webpack setup, I'm wanting to use Webpack Dev Server and enable Hot Reloading. It feels like I've read nearly all answers for solving this...

package.json

"dev": "NODE_ENV=dev webpack-dev-server --hot --inline --open --progress --mode development --content-base dist --config webpack.dev.js",

webpack.common.js

devtool: "source-map",
  entry: [
    "babel-polyfill",
    "./src/client/index.js"
  ],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/assets/"
  }

webpack.dev.js

const common = require("./webpack.common.js");

module.exports = merge(common, {
  devtool: "inline-source-map",
  devServer: {
    compress: true,
    contentBase: path.resolve(__dirname, "dist"),
    index: "index.html",
    stats: "normal",
    inline: true,
    clientLogLevel: "info"
  },
  mode: "development"
});

To run the project, I run yarn run dev and it will load the webpack-dev-server and open the React app in the browser, however, it doesn't hot reload. I'm not sure if it re-builds the bundle.js file, because when re-freshing the browser, it still loads the old version of the code.

oklas oklas · Accepted Answer · 2018-06-14T20:51:53

You are loading the static configured page. Static bundle is the file on your disk and it is recreated after you run webpack build command. You will use static configuration in production when it is ready to release.

You need to load dynamic bundle wich is server from webpack virtual file systems and which is accessible from url where webpack dev server is binded. For example http://localhost:8080/dist/bundle.js. This will be updated by webpack dev server each time when sources is changed.

React & Webpack Dev Server: Hot Reloading not working

2 Answers