React 和 Webpack 开发服务器：热重载不起作用

Posted 2023-02-22

【中文标题】React 和 Webpack 开发服务器：热重载不起作用

【英文标题】：React & Webpack Dev Server: Hot Reloading not working

【发布时间】：2018-11-24 16:56:05

【问题描述】：

我有一个带有相当简单的 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 文件，因为重新刷新浏览器时，它仍然会加载旧版本的代码。

【参考方案1】：

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

您需要从 webpack 虚拟文件系统加载动态包，它是服务器，并且可以从绑定 webpack 开发服务器的 url 访问。例如http://localhost:8080/dist/bundle.js。每次更改源时，这将由 webpack 开发服务器更新。

【讨论】：

有道理，我可以做任何明显的修复以允许使用我当前的配置进行热重载吗？

检查 webpack dev serv 使用了哪个端口。导航到 localhost:port/ 或添加路径到包。检查您的 html 是否也可以在那里访问。确保你的 html 引用了正确的 bundle url。

最后的答案是我的webpack bundle的输出路径错误，所以改了之后就可以了

这意味着您的 html 必须引用正确的 url 到动态包。通过更改输出路径或在 html 中仔细设置 url，它的完成方式没有区别。

【参考方案2】：

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