热加载程序复制代码(n 次）而不是热插拔

hot loader duplicating code (n times) instead of hot swapping

本文关键字：热插拔 程序 加载 复制 代码      更新时间：2023-09-26

当我对组件进行更改时，webpack 会重新编译并反应热交换模块......但是现在我的代码运行了n次，其中n是热模块交换发生的次数。例如，我进行了更改，现在函数正在运行两次。我做了另一个更改，函数运行了三次。我可以在我的商店的 dispatchToken 中放置一个console.log(Date.now())，我可以看到它正在运行n次。

店铺： http://pastebin.com/PVnyf572

webpack.config.js： http://pastebin.com/MsziqH9v

我用webpack-dev-server app/client.js --inline --hot --colors运行 webpack-dev-server

当我进行复杂的更改时，我经常收到以下错误消息（尽管如果我将商店的第 60 行更改为将运行状况增加 10 而不是 6，则不会发生这种情况）：

看来 React 热加载程序配置不正确。如果您使用的是 NPM，请确保您的依赖项不会将重复的 React 发行版拖到它们的node_modules中，并且 require（"react"） 对应于您渲染应用程序的 React 实例。如果您使用的是 React 的预编译版本，请参阅 https://github.com/gaearon/react-hot-loader/tree/master/docs#usage-with-external-react 以获取集成说明。

我认为您的 Webpack 配置不合适。 使用此样板然后运行您的代码 我认为您的问题将得到解决

https://github.com/tapos007/ReactJS-MobX-Webpack-Boilerplate

听起来你正在热重装一些有副作用的东西。

Webpack 文档提供了一些示例来展示如何处理热重载。

根据您的粘贴代码，我猜这是一个副作用：

    this.dispatchToken = Dispatcher.register(this.onAction.bind(this))

我认为您需要module.hot检测代码添加到PlayerStore文件中，以便在更换模块时"注销"。

相关文章：