问题标签 [hot-module-replacement]

我们有多个从 webpack-dev-server 提供的索引文件：

我们在这些前面有一个 nginx 代理来服务器 https 和 http。当 webpack 客户端连接到它时，sockjs-node它似乎添加了端口并直接进入webpack-dev-server而不是通过我们的 nginx 代理。这使得 HMR 在您通过 SSL 时不起作用，因为我们不使用 https 启动服务器。

有没有办法告诉它在进行 sockjs 协商时不要附加端口，让它继续使用 nginx 代理？

这是我们配置服务器的方式：

这就是我们启动它的方式：

我们正在使用此客户端，react-dev-utils/webpackHotDevClient但它似乎尝试在没有端口的情况下进行连接，然后发生升级协商并尝试与端口连接。

我们不能使用public和publicPath配置选项，因为我们有多个索引。我们只需要发现连接的位置，仅使用window.location而不添加端口等额外信息。

我正在尝试使用Webpack 动态语句延迟加载我的 Vue.js 路由，如下所示：vue-routerimport

这正确地导致 Webpack 按路由拆分我的 JavaScript 包，我最终得到了main.js一系列文件。我还注意到这些是 Chrome 开发工具中要求的。0.js1.js

但是，我似乎无法让它与热模块更换 (HMR) 一起使用。我在服务器端使用 ASP.NET Core。当我的页面加载时，我只看到一个空页面。在将 Vuex 与 HMR 一起使用时，我必须遵循此文档才能重新加载 Vuex 商店。对于延迟加载的路线，我需要做类似的事情吗？如果有帮助，这是我的 webpack.config.js 文件：

（即使使用 Angular 7 也确认了一个问题）。让我们解决这个问题！

我正在使用此处设置的 HMR：https ://github.com/angular/angular-cli/wiki/stories-configure-hmr来自全新ng new版本。

如果我更改任何组件并使其延迟加载，角度 HMR 将热重新加载所有内容，从而使页面同步变慢。

我知道这一点，因为它默认设置console.log为正在重新加载的每个模块，并且当我使用惰性路由时，它会记录所有内容。但是当我将该组件更改为非延迟加载时，它只会记录一些小组件。

因此，当我使用 HMR 和惰性路由时，我的应用程序需要几秒钟才能刷新。这很烦人。

有没有办法解决？

（延迟加载路线是通过这样的事情来完成的）

（只是一个例子来说明我正在以正确的方式延迟加载）

这里有一些日志显示当我延迟加载时会发生什么home.component.ts

我正在尝试设置一个启用热模块更换的角度 cli 项目。我按照 https://github.com/angular/angular-cli/wiki/stories-configure-hmr中的步骤进行操作， 但是每次更改某些代码时，我的应用程序仍会完全重建。

例如，我有一个由我的 TestModule 声明的 TestComponent。TestModule 由 AppModule 导入。测试组件看起来像这样：

我的 AppComponent 看起来像这样：

现在，如果我用一些输入填充两个输入字段，然后更改 TestComponent 的代码，启用 hmr，我希望 webpack 只重建 TestComponent，以便 AppComponent 中的输入保持不变。但是，应用程序完全重建，浏览器重新加载，两个输入都消失了。控制台输出表明 webpack 已检测到更改并且 hmr 将被执行。

我正在尝试使用热模块替换设置 webpack，并使用重写模块通过 IIS 中的反向代理访问它

我的简单重写规则：

即重写localhost/test/__webpack_hmr -> localhost:8080/__webpack_hmr

还有我的 webpack 配置：

我在端口 8080 上运行 webpack 服务器，如果我在http://localhost:8080访问该站点或在浏览器中手动输入http://localhost:8080/__webpack_hmr一切正常。

但是，如果我尝试通过http://localhost/test访问该站点或在浏览器中手动输入http://localhost/test/__webpack_hmr，则 /test 请求按预期工作，但http://localhost/test/ __webpack_hmr请求正在通过并保持打开状态，但没有数据流回。

我已经验证反向代理正在工作。为了让它工作，我需要使用 webpack 中的一些选项吗？

我是 React webpack 的新手，我正在尝试在我的工作流程中实现热模块替换。我正在使用 webpack、express、Babel ES6 和 React，我相信我拥有我需要的所有加载器。

我已经让 HMR 为我的 CSS 文件工作，它完美地更新了 CSS，但是由于某种原因，当我尝试更新 React 组件时，我收到以下错误并且必须刷新页面才能看到我的更改。我整天都在挣扎，所以任何帮助都会得到很大的帮助！我得到的错误如下（我的代码如下）：

index.js（入口）

index.js（部分组件）

BuildScript.js '使用严格';

Webpack.config.js

安装的 NPM 包

我遇到了一个奇怪的问题，热模块替换在我的应用程序中一直运行良好一段时间，但在最近的某个时候，它发生了变化。它不是替换页面上的特定组件，而是将组件附加到页面顶部，并且仍然在下面留下旧组件的副本。

我在谷歌上搜索过，也试图弄清楚发生了什么变化，但运气却很差。我的 WebPack 文件根本没有太大变化。

这是我的Webpack.js文件。

角 4

视觉工作室 2017

.Net 核心 2.0

我正在尝试使用 Microsoft 的新 spa 模板创建一个新应用程序，但 HMR（热模块更换）不起作用。我试过这个。

. 安装 SPA 模板：

. 使用命令行创建了一个新应用程序

Ran 命令（在 linux 上工作）：

.在 ClientApp 文件夹中：

.回到主文件夹：

我能够在http://localhost:5000看到应用程序运行没有任何问题，但是当我修改 Angular 应用程序文件夹中的任何 .ts 文件或 .html 时，没有任何更改反映或发送到浏览器。我如何在这个基于 angular/cli 的新模板中配置 HMR。

我也尝试过这样的事情：https ://github.com/angular/angular-cli/wiki/stories-configure-hmr

或这个。 https://medium.com/@beeman/tutorial-enable-hmr-in-angular-cli-apps-1b0d13b80130

PD.: VSCode 发生了同样的情况，测试了多个浏览器，我的 angular/cli、npm、nodejs、.netcore 是最新的

使用 Angular 5 应用程序配置 HMR的文档化方法不适用于混合 Angular 5/1.x 应用程序。

核心问题是module.hot.accept处理程序（在@angularclass/hmr中定义）尝试重新初始化 root 上的组件ApplicationRef，但在混合应用程序中，Angular 5 根上没有组件（因为顶级组件是 AngularJS 1.x零件）。

如果有办法枚举应用程序中的 Angular 5 组件，似乎重新加载逻辑可能会起作用，但我看不出有任何方法可以做到这一点。

有什么建议么？

Vue提供了一个HackerNews示例来演示如何进行服务器端渲染以及热模块重新加载支持。

基本上，客户端和服务器端代码被分成两个文件：编译成两个 json 文件entry-client.js和entry-server.js. 然后为每个编写两个 webpack 配置，并将它们编译成 JSON 文件。

然后，有用于处理两个 JSON 并提供内容的server.js服务器vue-server-renderer。

至于热模块重新加载，文件夹中有一个名为 setup-dev-server.js 的配置，用于build处理任务并将编译的内容存储在webpack-dev-middleware的文件系统中。

只要您只更改及其关联的模块，此设置就可以完美entry-client.js运行entry-server.js。但是，我想要做的是添加一个仅server.js与热模块重新加载支持一起使用的新模块。

一个例子是添加一个 RESTful API entry-api.js，：

并在server.js：

我设法编写了一个用于编译的 webpack 配置，entry-api.js它非常适合生产构建。至于热模块重新加载，对相关代码的任何更改都会entry-api.js触发重新编译，但这些更改永远不会实时反映。有人能告诉我我应该做些什么改变set-dev-server.js才能让它发挥作用吗？

参考：

我的 webpack 配置entry-api.js：

我还在GitHub 上打开了一个问题，我怀疑它会得到任何回应。