Question

我有一个具有相当简单的Webpack设置的React应用程序，我想要使用Webpack Dev Server并启用Hot Reloading。感觉就像我已经阅读了几乎所有解决这个问题的答案......

的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 dev服务器都会更新它。

Answer 2

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

反应＆amp; Webpack Dev Server：Hot Reloading无法正常工作

2 个答案: