React＆Webpack Dev Server：热重装不起作用

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.

Answer 1

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.

Answer 2

While hot module reloading might be enabled in webpack, it also require some changes in codebase, have you used module.hot in your application? ( https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr take a look at index.js part). As a react-specific alternative, react-hot-loader can be used