问题标签 [hot-module-replacement]

我目前正在尝试更好地了解 webpack 和 webpack-dev-server。

我有以下设置： 一个 php 站点提供一个 react 应用程序，我希望在此站点上进行热模块替换 (HMR) 以用于开发目的。因为我不希望我的 webpack-dev-server 为我的整个页面提供服务，所以我尝试让它为我的 bundle.js 提供服务，然后我现在手动将其包含在我的 php 文件中：

问题是，对于生产，我必须手动将此 url 更改为类似的东西/dist/elements.bundle.js，因为服务器上的 dev-server 不会提供捆绑包。

我读了很多webpack-dev-server/client?https://localhost:8877， webpack/hot/only-dev-server如果我理解正确，这些条目将重定向到 webpack-dev-server url？

如果我运行我的npm start-script webpack-dev-server --config webpack.dev.js，这将不会在文件系统中构建我的 elements.bundle.js，而只会从开发服务器的内存中提供它。在这种情况下，我不能包含本地 bundle.js，但必须使用来自localhost:8877. 但是我怎样才能让 webpack 编译入口点和 webpack-dev-server 用一个命令同时完成它的工作呢？

如果我在两个终端中运行，那么我可以包含webpack --config webpack.dev.js在我的 php 文件中，但是 HMR 不再工作了，因为它告诉我它必须重新加载整个页面。webpack-dev-server --config webpack.dev.js/dist/elements.bundle.js

我真的很想理解这些概念，如果有人能给我一些建议并帮助我正确设置我的项目，我会很高兴。

如何在不更改我的 php 文件中的脚本标签并支持 HMR 和 react-hot-loader 的情况下在开发和生产之间切换？

这是我的 webpack.dev.js：

这是我的 webpack.common.js：

style-loader我有开发和生产 webpack 配置，我分别在使用和extract-text-webpack-plugin捆绑 CSS之间切换。这是因为我的开发配置使用热模块替换，因此需要内联样式，而我的生产配置不需要。

但是，在从生产切换到开发时，我注意到main.css从生产 webpack 构建中提取的剩余内容覆盖了我的style-loader. 这意味着热重载不适用于 CSS 更改。

首先，我的内联样式不应该覆盖我的外部样式表main.css，那么为什么会发生这种情况？其次，如果这是预期的行为，那么处理这个问题的一般惯例是什么？main.css我应该在我的开发配置中使用一些 webpack“清理”插件来删除吗？

HMR 没有收到来自 WDS 的更新信号

• 操作系统：MacOS 10.12.6
• 节点版本：8.5.0
• NPM 版本：5.3.0
• 网络包版本：3.6.0
• webpack-dev-server 版本：2.8.2

代码

终端输出

通过 HtmlWebpackPlugin在http://localhost:8080/上生成 html

Chrome 控制台

然后更改main.js-console.log('>>>>')到console.log('Changed')

更改 main.js 后的 Chrome 控制台

我正在尝试让东西正常工作，但我无法成功。最初我收到以下错误：

我按照页面上的说明进行操作，很难理解我必须将商店创建放入其中index.android.js并将其作为道具传递，其中HMR不会重新渲染内容，因此不会再次创建商店。但我终于摆脱了错误。

我现在可以看到，当我更改任何减速器时，我的商店在module.hot.accept函数中的函数中更新，例如初始状态。App/Redux/createStoreApp/Redux/SearchRedux

但是如果我编辑减速器，我的应用程序状态根本不会刷新！更糟糕的是，当我这样做时，整个应用程序都会与状态断开连接（但我没有举例说明这个更简单的应用程序，所以让我们专注于状态不会被重新注入）。我可以看到它App/Navigation/ReduxNavigation

您可以通过克隆repo轻松重现该错误。

从今天早上开始，我一直在努力解决这个问题，时间开始变长，所以我终于在 SO 上发帖了。我已经阅读了很多与此问题相关的内容，但很明显我遗漏了一些东西。

PS：最初我写了很多文件链接，所以你可以直接看到我对代码的意思。但是，尽管我使用该网站已有几年时间，但我的声誉却很低（因为我总是找到答案，而不是这次）你会在 repo 自述文件中的链接中找到这个问题，这样会更容易看到我正在谈论的文件。

谢谢

我们正在使用升级适配器来设置 Angular 1/2 Hybrid 应用程序。我们正在像这样引导应用程序（如 Angular 文档https://angular.io/guide/upgrade中所述）：

对于我们的 HMR 设置，我们使用 Angular CLI 并遵循这些说明https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/configure-hmr.md

问题是，当 HMR 运行并尝试再次运行该引导代码时，它会尝试重新引导 Angular 1 应用程序，这会导致 Angular 1 模块已被引导的错误。

如果尚未引导 angular 1，则尝试仅有条件地运行该代码也行不通，因为虽然组件确实刷新，但它不会重新加载新的更新。

我们采用了一些似乎可行但不太理想的方法，即删除 angular 1 应用程序元素并重新创建它，以便引导程序不会出错。

像这样的东西：

虽然有点 hacky，但至少似乎可以让 HMR 正常工作。然而，因为它导致整个 angular 1 应用程序重新启动，而不是仅仅刷新更改的模块，这仅比简单的 livereload 快一点。

有没有更好的方法来重新启动混合应用程序以允许 HMR 工作？

我正在使用最新的 ASP.NET 2.0 react SPA 模板，该模板是使用命令dotnet new react 创建的。它开箱即用，热模块替换（代码编辑自动在浏览器中更新）。

然后我想添加一个顶级应用容器，称为App来保存应用程序状态，如这篇博文所述： react without redux article。应该很简单吧？请注意，本文使用 javascript，但我使用的是 Typescript，因为这就是模板的设计方式。但是在添加了一个简单的顶级容器组件并更新了热加载器配置之后，它就不起作用了。我收到一个错误，该组件不知道如何重新加载自己。这是正在工作的代码（来自模板）：

这是我更改后的代码，它不起作用：

作为参考，这是 ./routes 文件（我没有更改此文件）：

这是我的新 App 容器组件：

任何想法或建议将不胜感激！

我的 webpack.config.js 中有 3 个条目，它们生成 3 个不同的 HTML 文件。我这样做是为了可以将它们托管在不同的域上：

• index.html = http://app.local
• site.html = http://site.local
• forms.html = http://forms.local

现在我有一个自定义开发服务器，它启动 webpack 构建 3 次，以便我可以指出索引文件应该是什么。我想做的是将其更改为单个服务器并使用主机标头来决定要加载的索引文件。

我尝试这样做的方式是：

这适用于网站的初始加载，但我得到 404 用于其他所有内容。我应该做什么而不是req.url？我不能使用res.sendFile，因为 webpack 正在编译内存中的所有内容。

我按照指令做：指令

HMR 不起作用 - 页面完全重新启动。

会出什么问题？请提出澄清问题

在阅读了 Dan Abramov 的这篇Medium 帖子后，我使用 webpack 尝试了非常基本的 HMR（没有 react-hot-loader） 。

入口index.js

webpack 配置

我的问题是，为什么 React 应用程序的 HMR 只适用于module.hot.accept()？

据我了解，webpack 的 HMR 只提供了一个简单的 API 来检测文件的变化。如何处理这些更改取决于加载程序。样式加载器处理.css文件。而且，在 React 应用程序的上下文中，对.js模块的更改可能由 react-hot-loader 管理。

或者，根据Medium post，可以像这样管理它们：

那么为什么只是做module.hot.accept()和做的结果一样render(<UpdatedApp />, document.getElementById('app'))呢？

包版本

我有一个项目，我们使用 webpack 的 devserver 进行本地开发。我们还有用于实时重新加载的热模块替换：热模块替换

我们的前端在 docker 中运行。有了这个前端，我们还有 apache 的 mod_proxy。想法是让所有 http 调用都通过 mod_proxy。所以浏览器会将http发送到mod_proxy，然后代理到前端。这在没有热模块更换的情况下运行良好。但由于某种原因，我们无法进行热模块更换工作。我猜这是因为热模块替换使用网络套接字，并且默认情况下未启用通过 apache 的 mod_proxy 隧道网络套接字调用？

有人能够做到这一点吗？你是怎么做到的？开发服务器/热模块更换需要哪些配置？你是否使用了 apache 的 mod_proxy web socket 隧道：mod_proxy_wstunnel，你是如何配置它的？您不需要回答之前列出的所有子问题，我只需要有关如何使其工作的信息。