I am trying to create a minimal working example of hot module replacement using webpack-dev-server. Basically, I want to use webpack to prepare a bundle.js file containing a few modules modules that will be loaded and run in an HTML page invoked by a browser.

An example of module moduleA that I would like to make hot-swappable is the following:

And then there is a main module (which I don't plan to hot-swap) that uses it:

If I modify e.g. the value returned by myA I'd expect the button alert text to change; indeed, the console displays all the messages between the HRM server and the runtime, but the click on the button shows still the older alert value.

I have verified that the hot-swap handlers in the main module do not run when moduleA gets swapped. I understood that some kind of hot-swapping event bubbles up the chain of require's, but apparently that's not happening in my case.

Unfortunately most examples around are either too complex, not JS-based or for some reason behaving differently from what I'd expect.

My basic question is: can anyone show me how I should modify my simple modules to make them truly hot-swappable?.

For whoever wants the whole picture, here is the code

我以前使用过这里找到的方法让 HMR 与 RC4 一起使用 Webpack 时保持 ngRX 状态。

使用 RC5 和 ngModules，引导过程发生了变化，我正在努力了解如何调整以前的方法来解决这个问题。

谁能指出我正确的方向或建议另一种方法？

我有一个本身就可以完美运行的 webpack 配置。我正在尝试按照建议将 React Hot Loader 与 HMR 一起安装，这需要 webpack-dev-server。在这里我无法让它工作。我找不到我的捆绑包所在的位置。我希望它只是在localhost:3000.

我的webpack.config.js：

和webpack-server.js：

更新：链接的问题没有帮助，特别是因为它甚至没有确认的答案。

我来自哪里

我已经使用 webpack 有一段时间了，但这是我第一次不为它修改入门工具包，而是尝试从头开始设置所有内容。

我关注了survivaljs.com 上的这篇不错的文章，并继承了其中描述的一些方法，将它们与我早期的一些设置结合起来（比如根据发送的生产变量设置不同的名称和路径）。

在讲座期间，我尝试尽可能多地运行“构建”和“启动”，以免被一些我无法追踪的意外行为所抓住。这工作得很好。

然后在某个时候，在摆弄关于从第三方框架中排除未使用的 css的章节时， 我不知何故破坏了我的开发服务器设置。（"run build"仍然有效！）

问题

我的热服务器定义在 192.168.1.2:3000（这正是我想要的）。当我webpack-dev-server使用下面进一步显示的设置运行时，我在该位置收到404（无法获取 /）。现在我已经阅读了很多关于如何正确设置 webpack 开发服务器的内容，但我仍然没有得到正确的答案......（很可能并不孤单......）因为我仍然不完全理解如何路径工作。

这是我的理解（通用开发服务器设置）：

（如果我在这方面错了，请帮助我）

• my 的输出路径webpack.config.js只会在运行开发服务器时在内存中提供，因此在物理上不可见（path: path.join(__dirname, 'devServerFolder'例如，如果输出是，如果不是由我创建，我将永远不会在项目结构中的任何地方看到该文件夹)
• 在我指向 with和with 的文件夹中需要一个index.html指向 my的静态文件（这可能是我需要在其中创建的文件夹；通常在网络上的大多数设置中，用于保存的文件夹相同）生产建立）bundle.jspublicPathcontentBasedevServerFolderindex.htmlpublic
• 如果我使用html-webpack-plugin插件，它将自动为我生成该文件，而无需指向任何内容，因为 bundle.js 由插件写入其中

这些是真正困扰我理解的一些要点。我已经尝试了很多。的。不同。组合使用publicPath和contentBase设置没有运气来重新建立我的开发服务器（首先工作正常）。 请注意，我在代码或使用 编译我的构建时没有任何问题run build，它工作正常，就像它应该的那样。

配置

文件夹结构

Webpack.config.js

我环顾四周，但无法得到我在 stackoverflow 上看到的任何答案。

我无法使用 webpack 或 webpack dev-server 的命令行；我仅限于使用 Node API。

下面是我如何使用 webpack。

webpack.config.js

包含在 gulp 任务“开始”中

我的期望

当我运行 gulp start 时，我希望 webpack 开发服务器启动，允许我访问 localhost:3000/。这应该从我的项目的 /dist/ 文件夹中加载一个 index.html。到目前为止，一切都很好。我希望当我对文件（例如 app.jsx）进行更改时，更改将会出现。

实际发生了什么

我收到错误“[HMR] Hot Module Replacement is disabled”，没有进一步的解释。

任何帮助，将不胜感激。我一直试图让热重装工作一整天。

我遇到了一个非常令人沮丧的问题，我的 webpack-hot-middleware 不是“热重载”。它正在构建项目，并在我对任何有问题的文件进行任何编辑时重新构建项目，但它似乎从未显示任何更改，并且总是在对它们进行编辑之前显示我的文件（几乎就像它正在缓存它们或某物）。

我也在使用 Express 服务器，对这一切都很陌生。实际上，我正在尝试使用从雇主那里交给我的文件来设置开发环境，并且很难弄清楚如何解决这个问题。

我的 package.json 运行这些脚本：

在“npm install”之后，它似乎运行了这个文件“webpack.prod.config.js”：

“npm start”运行“app_build.js”，如下所示：

这个文件还有更多内容，但我相信我的问题与我的 publicPath 或其他东西有关，我不完全确定。就像我说的，我从以前的开发人员那里得到了这个配置，我对这一切都是全新的。

我对 Angular 2 非常陌生，我想在我的 Angular 2 项目中实现 HMR（因为等待页面重新加载的时间对我来说非常混乱）。

我从 react native 开始，我对 React 有一点经验，因此我想使用redux、react-router和react-router-redux，我过去曾将其用于 Web React 应用程序。

所有这些包都可以在 react-native 中使用，除了 react-router，我能找到的最接近的是react-router-native它似乎工作起来很像浏览器版本。到目前为止一切顺利，我制作了一个快速而肮脏的应用程序来测试路由器、redux 等。

但是我遇到了一些我不知道如何解决或调试的问题：当更改文本或某些样式等视觉效果时，HMR 似乎可以正常工作，实时应用更改，但是当我更改其他一些模块/文件，如容器元素（调用 redux connect() 函数的地方）或减速器上的一些代码，HMR 不会改变任何东西，我必须重新加载所有应用程序才能看到更改。

这是我的代码：https ://github.com/DenJohX/test-react-router-native它基本上只是通过在 redux 存储中切换一个变量来改变一些文本的颜色。很抱歉只是链接它，但我认为最好向您展示所有文件夹和项目结构，也许我只是在那里搞砸了一些东西或者没有使用正确的文件夹结构。

我正在使用https://github.com/jhen0409/react-native-debugger调试应用程序，通过控制台消息，HMR 确实运行并修补了一些东西，但不影响当前加载的代码。

要测试问题，请尝试编辑 中的颜色src/screens/pageOneContainer.js，HMR 应该更改代码，重新渲染屏幕，并显示新颜色，但它们保持不变。

提前致谢。

我正在运行一个快速服务器，它将充当我的 React 应用程序的 API，该应用程序由 webpack-dev-server 捆绑和提供服务。

我正在尝试让热模块更换工作，并且几乎就在那里，当我对我的文件进行更改时，我在控制台中得到了这个：

但应用程序永远不会重新渲染，除非手动刷新。不知道这是否相关，但是当我更新我的.scss文件时，它会在没有手动操作的情况下刷新，并且会按照我的预期进行更新。

版本：

"webpack": "2.1.0-beta.22"

"webpack-dev-server": "2.1.0-beta.8"

"react-hot-loader": "3.0.0-beta.5"

我尝试了最新的 webpack，但它给了我无法克服的验证错误。

我正在通过: 运行 webpack "webpack": "webpack-dev-server --port 4000 --env.dev"，并且我的快速服务器正在运行http://localhost:3000。

这是我的webpack.config.babel.js：

这是我.babelrc的，我打电话的地方react-hot-loader

我在 Vue 2 中实现了一个简单的用户存储来跟踪当前经过身份验证的用户。

它看起来像这样：

我还有一个简单的身份验证服务（作为插件实现），它从 api 获取用户并将他保存到商店中。每当用户登录或加载应用程序时，身份验证服务都会获取用户并将他保存到商店。

我正在尝试从另一个组件（我的导航栏）访问商店。我在我的组件中有这个来导入 userStore：

这在 Chrome 和 Firefox 中运行得非常好。

但是，在 Safari 中，我得到了一些奇怪的行为：

如果我通过保存 Navbar.vue 文件强制导航栏的数据进行热重新加载，则从存储中获取数据。但是，在所有其他情况下（页面重新加载，或登录后 vue-router 重定向后），导航栏的数据不会使用当前用户存储更新。

如何解决此问题以在所有浏览器中工作？

编辑：

我有更多信息：

如果我坐在 Safari 中的刷新按钮上，有时我会随机从用户存储中获取正确呈现的数据，而随机我不会。

我的预感是，有时 api 调用返回的速度足够快，以便在呈现导航栏数据时数据可用，有时则不然。

在其他浏览器中，即使数据在加载时不可用，它也会在数据可用时更新响应数据。出于某种原因，Safari 中的情况并非如此（除了如果我通过重新保存文件来强制它进行更新，热重载确实有效）

编辑＃2：

我可以确认这是问题所在。更新商店时我的数据没有更新。

我通过在从存储中获取数据之前让导航栏组件休眠 2 秒来证明这一点，并且确实，现在在 Safari 中每次都正确填充数据。

所以现在的问题变得更加根本，我如何在 Safari 中使用 store 模式？