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

Question

我有一个带有相当简单的Webpack设置的React应用，我想使用Webpack Dev Server并启用热重载。 好像我已经阅读了解决此问题的几乎所有答案...

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"
});

为了运行项目，我运行yarn run dev ，它将加载webpack-dev-server并在浏览器中打开React应用，但是，它不会热重载。 我不确定是否会重新生成bundle.js文件，因为在刷新浏览器时，它仍会加载旧版本的代码。

Answer 1

您正在加载静态配置页面。 静态捆绑包是磁盘上的文件，并且在您运行webpack build命令后会重新创建它。 准备发布时，您将在生产中使用静态配置。

您需要从webpack虚拟文件系统中加载服务器中的动态捆绑包，并且可以从绑定了webpack dev服务器的url访问该捆绑包。 例如http://localhost:8080/dist/bundle.js 。 每次更改源时，webpack开发服务器都会对此进行更新。

Answer 2

虽然可以在webpack中启用热模块重新加载，但它也需要对代码库进行一些更改，您module.hot在应用程序中使用了module.hot ？ （ https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr看看index.js部分）。 作为特定于反应的替代方案，可以使用react-hot-loader