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