目前我正在努力让 HMR 在我的 Webpack 2 设置中工作。我将解释我的整个设置，所以我希望这足以让某人了解正在发生的事情。

我的项目结构：

这是我的webpack.config.js文件的内容，放置在我的项目的根目录中：

所以在这个文件中，我可以选择将不同的环境传递给buildConfig函数。我使用此选项来使用不同的配置文件进行开发和生产。这是我package.json文件中的内容：

我当然有更多的领域，package.json但我不会在这里展示它们，因为它们无关紧要。

因此，在开发过程npm run build:dev中，我在终端中运行该命令。这将使用文件夹dev.js中的config文件。这是dev.js文件的内容：

最后但同样重要的是，我的 HMR 设置。我的index.js文件中有这个设置：

因此，当我npm start build:dev在浏览器中运行 my 并转到时，http://localhost:3000我看到我的网站按预期工作。这是控制台中的输出：

test文本来自我TodoApp组件中的渲染函数。这个函数看起来像这样：

所以，现在重要的东西。我更新了这个渲染函数的返回值，这应该会触发 HMR 启动。我将渲染函数更改为此。

这是我在控制台中得到的输出：

你会说这很好。但我的网站没有更新任何东西。

然后我将我的 HMR 代码更改为index.js：

它有效。我只是不明白。如果这是我的 HMR 代码，为什么它不起作用：

顺便说一句，此设置基于https://webpack.js.org/guides/hmr-react/中的设置

我希望任何人都可以帮助我。如果有人需要更多信息，请不要犹豫。提前致谢！

更新

忘记发我的.babelrc文件了。就是这个：

我正在尝试让 Webpack 2 + React Hot Loader 工作，但它似乎没有热重载。它可以正确呈现网页，但无论何时我对“App.js”文件进行任何更改，它都不会做任何事情。

webpack.config.json

.babelrc

包.json

我通过带有 --hot 和 --inline 标志的 CLI 运行 webpack-dev-server。

main.js

应用程序.js

所以为了测试它，我将运行yarn dev并且服务器将启动。一切都会编译，webpack 会输出webpack: Compiled sucessfully. 但是，对 App.js 所做的任何更改都不会重新加载网页。网页本身的控制台仅输出以下内容：

我尝试了此处列出的各种方法（https://github.com/webpack/webpack-dev-server/issues/100），但它们似乎都不起作用。

我正在使用 react-hot-loader 3.0.0-beta.6 热重载反应组件。重新加载本身效果很好 - 我立即看到更新的组件。不幸的是，在成功重新加载后，在应用程序内调度操作不再触发重新渲染，我需要进行完全手动刷新以使应用程序再次运行。调度的操作会更新 redux 存储，但不会重新渲染组件。

我使用的所有组件都由一个连接的容器和一个无状态组件组成。不呈现更新状态的原因可能是什么？我怎样才能继续调试？

MyComponent/container.js：

我的组件/component.jsx：

以下是成功更新：

在 main.jsx 中渲染：

我在使用 HotModuleReplacement 时遇到了一些错误。我实际上不能使用它，它说__webpack_hmr找不到。

在/node_modules/webpack-hot-middleware/client.js我默认情况下有这个配置：

但是我的 basedir 下没有“__webpack_hmr”。它应该位于哪里，是一个文件？我很困惑，尝试使用 Brosersync、webpack、HMR。我只是在测试一些 React Admin Panel，我已经在 Github 上向作者询问过，但没有回应。请帮忙。

这是我的 webpack 配置的一部分：

Webpack hmr: __webpack_hmr 404 not found等一些主题提供了没有意义的解决方案，而且与我的情况不同。

我正在使用 Cluod9 IDE，所以我没有本地主机，我必须在某处手动定义主机。

我正在使用 webpack，并且正在尝试使用环回实现 HMR 以重新加载服务器端。

这样每次我更改 json 配置文件（例如）时，都会更新环回。

我无法弄清楚如何使用 module.hot 来实现这一点，我也有使用 chokidar 来监视文件更改的想法，但我不知道如何重新加载模块或重新启动环回。

有任何想法吗？

我正在尝试集成 HotModuleReplacement 并遵循此样板文件，但不适用于我的 webpack 配置。

我遇到的“问题”在output.publicPath条目中。按照我提到的示例，该行是“ HMR 知道在哪里加载热更新块所必需的”，但是当我将它包含在我的 webpack 配置中时，它给了我这个错误GET http://localhost:3000/ 404 (Not Found)。如果我不包含它，webpack 会成功编译所有内容，但是即使当我查看控制台时，HMR 也不起作用

下面是webpack.config.js文件。

我错过了什么？

这些是我的项目依赖项，以防万一

编辑

我让它工作了。我更改publicPath为publicPath: '/'并添加{"modules": false}到我的.babelrc文件中

下面是我的.babelrc文件

我想我有一个新问题，是什么{"modules": false}意思？它是用来做什么的？

当我在父文件夹中使用 node_modules 在多个项目中使用时，HotModuleReplacement 不起作用。如果我在开发服务器中禁用热选项，它会完美运行。我更改的每个文件，控制台都会发送以下消息：

[WDS] 热模块更换已启用。

在此处输入代码[WDS] 应用已更新。重新编译...

[WDS] 应用热更新...

有谁知道，有什么问题？

我遇到了一个问题，我在其他地方看到过报告（但不是真正有效的解决方案），当尝试使用反应热模块重新加载时，当渲染方法中的内容发生变化时，整个页面都会刷新。

客户端.js

根.js

package.json脚本：yarn run dev

webpack.config.js

版本

在控制台的初始加载中，我看到[HMR] Waiting for update signal from WDS...

然后在保存更改时，页面刷新，然后在控制台中我得到

[HMR] 找不到更新。需要完全重新加载！[HMR]（可能是因为重启了 webpack-dev-server）

如何让 HMR 注入 JS 而不重新加载页面？

我正在尝试让 HMR 为我的淘汰赛应用程序工作，并且目前正在努力让 HMR 重新加载，每当我更改viewModel自身内部的某些内容时，但范围之外的任何内容都可以工作。

例子：

我想知道我是否需要做其他事情来告诉 HMR 重新触发viewModel? 目前在我的main.js文件中，我ko.applyBindings(new AppViewModel());只有一次被解雇，而且ko.components.register()我的main.js文件中也有需要在我的mymodule文件中。

我已经在现有项目上设置了 vue + vue-loader + HMR。

它工作得很好，vue 组件被正确加载和渲染。

热模块重载部分配置和加载。

但是，当更改只是组件的文本节点时，它似乎不会应用更新。

例如，如果我有这样的组件：

我把它改成这样：

然后我可以在浏览器控制台中看到 HMR 更新。

但是组件没有更新，它仍然说“我是组件”。

但是，如果我像这样稍微改变组件的 html 结构：

然后控制台显示 HMR 日志，但这次是组件更新。

行为始终相同，文本更改 = 无更新。

加载程序在其配置中没有任何特别之处。

开发服务器通过 gulp 启动，执行以下任务：

不知道在哪里可以解决这个问题。如前所述，它有点工作，只是不适用于文本节点更新。

我查看了vue-cli webpack-simple示例生成的模板，代码有点相似（除了开发服务器是从节点命令行启动而不是手动构建它），他们的更新文本节点，我的没有:(

有什么线索吗？

更新：相关依赖的版本

更新 2：<script>对组件的部分应用任何修改都会导致文本节点刷新。

更新 3：

PUBLIC_DEV_SERVER被设定为"http://localhost:4000/"

ENTRY被设定为"./src/js/frontend.js"