问题标签 [hot-module-replacement]

我正在尝试设置一个快速服务器来开发具有热重载的 React 项目，但 HMR 事物由于某种原因请求了错误的路径，我无法通过更改“publicPath”选项来修复它。即使这是我服务器静态文件的文件夹，它也会请求“公共”文件夹，因此会导致错误。如何调整配置以使 HMR 开始工作？这是我在控制台中看到的错误： 我的 Webpack 配置：

服务器.js：

所以目前我正在开发一个 .NET MVC 应用程序，其中应用程序的一部分是一个门户，客户端完全使用 reactjs 呈现。

基本上，我的门户网站有一个 index.cshtml 文件，看起来像这样：

我的客户端 reactjs 应用程序使用快速服务器在端口：3000 上同时运行。我通过 localhost:53079 访问我的主 MVC 应用程序。我想知道是否可以让热模块重新加载以在端口 53079 上工作，因为这是我访问我的应用程序的方式？

我的 webpack.config.dev.js 看起来像这样：

我尝试在 devServer 以及输出路径中修改端口号，但没有任何运气。我也几乎找不到关于如何配置 hmr 端口号的资料。目前我的控制台被以下错误消息乱扔：

EventSource 的响应具有不是“text/event-stream”的 MIME 类型（“text/html”）。中止连接。

我正在尝试为 koa2 开发构建一个 HMR chokidar。

更改文本./middlewares/render会触发 chokidar 文件监视事件，并且 require.cache 会按预期立即清除，但是当我重新加载页面时，呈现的文本实际上并没有改变。

./index.js

./middlewares/views.js

./middlewares/render.js

./templates/index.ejs

我遵循本指南并编写类似该指南的代码。一切都好！但是当我更改import printMe from './print.js'为时import printMe from './print'，HMR 不会正确输出更改！

当我改变如下print.js：

控制台应该输出：正在更新 print.js...

但它输出：我从 print.js 中被调用！

当我再次将“更新 print.js ...”更改为“再次更新 print.js ...”时，它并没有改变。

以下是我的快照：

但是，模块分辨率说：

• 如果路径具有文件扩展名，则该文件被直接捆绑。
• 否则，使用 resolve.extensions 选项解析文件扩展名，该选项告诉解析器哪些扩展名（例如 - .js、.jsx）可用于解析。

和resolve-extensions还说：

自动解析某些扩展。这默认为：

所以，我的问题是：webpack 不能像上面所说的那样解析没有扩展名的路径吗？这是一个错误还是我做错了什么？我所做的只是更改import printMe from './print.js'为import printMe from './print'.

我的环境：

• 节点 v7.4.0
• npm 4.0.5
• 网络包 3.4.1
• 网络包开发服务器 2.6.1
• macOS 塞拉利昂 10.12

非常感谢！！

我在热模块重新加载时遇到 CORS 问题 - 开发服务器。我在端口上使用开发服务器，3000但应用程序是从另一个端口提供的http://localhost:52024/。

这是我得到的错误（Chrome，Windows 10）：

实际上我得到了两个错误：第一个是由//路径中的双斜杠引起的，另一个是与 CORS 相关的错误。这是我的webpack.config.js：

我开始使用 webpack：

任何想法？我正在使用webpack 3.5.1，webpack-dev-server 2.7.1谢谢。

我关注了这个 github 故事：https ://github.com/angular/angular-cli/wiki/stories-configure-hmr

当我这样做时ng serve（环境是 Dev），我能够在自动刷新后看到更改，但是使用ng serve --hmr -e=hmr时，页面会自动刷新（如闪烁）而没有更改。我必须按下F5才能看到更改。

HMR 工作正常，因为我看到我的终端输出如下：

我还看到了 HMR 的控制台输出。我还能做些什么来充分利用 HMR？

我已经尝试过的：

1. 我禁用了 WebStorm 的“安全写入”表单。

2. 我删除并重新安装node_modules.

我有一个共享文件夹，其中存储了可重用的 React 组件。我想让 Hot Reload 与该目录一起工作，但它不起作用。这是我的文件夹结构：

当文件夹中的某些内容发生变化时，Webpack HotModuleReplacement 插件不会以某种方式触发重新加载/shared？webpack.config 中的条目如下所示：

应用程序中的热门：

该应用程序使用react-boilerplate.

在创建应用程序时，react-native init我自动配置了热重载和实时重载，并且可以从开发人员工具中启用它们。我知道 Live Reload 会重新加载应用程序，而 Hot Reload 只会重新加载更改的文件并保持您在开发环境中的当前状态。

从这些描述中，我读到听起来热重载总是比实时重载更可取，我什至不应该费心启用实时重载。我很想知道是否有任何时候 Live Reload 更有利？或者它只是某种内置的后备，以防热重载无法与您的其他依赖项一起使用？

我想使用 Angular 4、Webpack 和 HMR 进行设置。

我最关心的部分实际上是样式替换。我做了一些功课，到目前为止还没有找到可行的解决方案。

只是为了检查：是否有人为此提供开箱即用的解决方案？

如果没有，那么我想我需要更多地理解这个话题：

1) Angular 用于将组件特定属性分配给 css 的算法是什么？

2）Angular中是否有任何API（它是JavaScript，所以我不介意它是公共的还是实现细节/“隐藏”）可以让我重新加载/替换给定组件的样式？我对 HMR 做了一些研究，如果存在这样的 API 或者它是可行的，那么我很想尝试使用它。

3）请验证我的假设是否正确：从技术角度来看，这应该不会太难 - Angular（至少在我的设置中）将所有样式加载为<style>标签 - 如果我没有弄错每种组件类型的话。

<style>如果这一切都是真的，那么找到正确的标签并将其内容替换为我从 Webpack HMR 获得的内容应该不是什么大问题。

唯一的问题是应用隔离 - 编译 css 并在其中应用 [__ngSomething] 属性。

当我更改 dom 时，页面会刷新，但更改 css，hmr 工作，页面不刷新，将热替换。我希望当我更改 dom 时页面不会刷新而不是热替换

全局 webpack 版本 3.3.0，Mac OS 10.11.6

这是我的package.json文件：

这是我的webpack.config.js文件：

这是我的main.js文件，我在这个文件中更改了 dom，只更改了 divv 的 innerHTML，然后页面将刷新，结果不是我想要的。

这是我的app.css文件：

这是我的index.html文件：

对不起我的简单问题和糟糕的英语和格式。