问题标签 [webpack-hmr]

在开始之前，此链接可能很有用：HMR 的目的是什么？.

我在大型项目管理/概念方面没有丰富的经验。我还很年轻，有一个漂亮的胡子。所以我在这里，寻求建议。

种子

我正在寻找并思考这个 angular 2 的种子，我想知道使用 HMR 是否是开发大型应用程序的可行选择以及如何做到这一点。

那些只是虽然，我只是想和你讨论一下我的决定。我们都需要跨越我们的经验:-)

数据结构

基于这个例子：

通过使用 appState，可以动态地重新加载组件并注入数据。听起来很酷。但这是我的第一个问题：要启用此功能，组件必须在 appstate 树中占有一席之地，因此localState在示例中使用 like 是个好主意。这迫使我们在我们的组件中使用一个可能很大的对象。这可能很烦人。你同意吗 ？这可能是大型应用程序的问题吗？（我要开发一个大型应用程序）。

它可能什么都不是，因为我只需要存储localStorage我希望 HMR 跟踪的数据。那为什么不呢。

数据存储

说到存储，我也使用 @ngrx/store 作为 Redux 的实现。这似乎是一个非常好的主意，因为 state 可以是 my localStorage. 当应用程序更新时，我只需要为我的状态补充水分，它就可以工作了。hmr 不会跟踪组件中的数据，只会跟踪状态。

听起来很棒。但这是个好主意吗？我试图找到一个连接器来处理@ngrx/store 和 hmr 之间的通信。 胜利！但这个包似乎已经过时了。

我可以自己做，但这是个好主意吗？Angular 的服务将使用 reducer，我可以找到更新 hmr 状态的钩子。

我认为 @ngrx/store 和 hmr 很受 Angular 开发人员的欢迎。这两种技术似乎很合适，但我在这里找不到很多资源。所以我想肯定有一个我现在看不到的问题。

我写所有这些都是为了向您询问有关您对这些技术/问题的体验的建议。

您认为结合这些技术有什么弊端吗？我正在试验，但我无法考虑所有情况。这就是为什么我需要你的帮助。

概括

• HMR 准备好“生产”了吗？
• 是否可以在@ngrx/store 中移动大量信息（例如'此复选框已选中'、'此输入的当前值是foobar'......）
• 最重要的是：这些技术适合吗？

这些问题让我想起了https://github.com/CodeSequence/ngrx-store-hmr/issues/2。

我目前正在尝试使用我的 webpack 项目设置热模块替换。在我对源代码中的反应组件进行更改的那一刻，我看到模块在没有刷新的情况下在浏览器中重新加载，然后是页面的完全刷新。

这是我在控制台中看到的。

WDS 似乎运行两次？

• 下一行是 404，对于 GET http://localhost:8088/dist/0580e96e5dacd24618e5.hot-update.json 404（未找到）我出于公司隐私考虑删除了这个 :)

然后控制台中的这两行：

• 项目清单

dev-server.js:28 [HMR] 找不到更新。需要完全重新加载！（匿名函数）@ dev-server.js:28（匿名函数）@

• 项目清单

index.js:238request.onreadystatechange @ index.js:37 dev-server.js:29 [HMR] （可能是因为重启了 webpack-dev-server）

如您所见，'client:37 [WDS] 应用程序已更新。重新编译...' 似乎运行了两次...这可能就是为什么它既是热交换又是完全重新加载的原因。

有任何想法吗？

这是我的 webpack.config

这是我在 npm 任务中运行的 devServer.js 文件。

我有一个小项目，并决定尝试使用 webpack。

使用热重载，我能够捆绑所有内容并更新 js 或 sass 的更改。

问题是，我有一些事件读取器，比如

当我更改这些侦听器中的一些代码时，热重载会显示更新的代码，但绑定的元素是旧的。

我正在使用 vainilla js。

有没有办法在不手动删除事件侦听器的情况下重新绑定所有侦听器？

您好，我正在将 Angular CLI (beta.22) 与 HMR 一起使用。

它以某种方式正常工作，但现在每次更改都会刷新整个页面。控制台出现错误：

不应用更新。需要完全重新加载！（匿名函数）@dev-server.js:33ZoneDelegate.invoke@zone.js:232Zone.run@zone.js:114（匿名函数）@zone.js:502ZoneDelegate.invokeTask@zone。 js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401 vendor.bundle.js:55305 [HMR] 错误：已创建具有不同配置的平台。请先销毁它。在 assertPlatform ( http://localhost:4200/vendor.bundle.js:27579:15 ) 在http://localhost:4200/vendor.bundle.js:27564:16 在 bootstrap ( http://localhost:4200/ main.bundle.js:273:132 ) 在 hmrBootstrap ( http://localhost:4200/main.bundle.js:1094:5 ) 在 Object. ( http://localhost:4200/main.bundle.js:277:90) 在 Object.494 ( http://localhost:4200/main.bundle.js:288:30 ) 在webpack_require ( http://localhost:4200/inline.bundle.js:686:30 ) 在 hotApply ( http: //localhost:4200/inline.bundle.js:613:14 ) 在 hotUpdateDownloaded ( http://localhost:4200/inline.bundle.js:311:13 ) 在 hotAddUpdateChunk ( http://localhost:4200/inline.捆绑.js:291:13 )

这是我的 webpack.config.json。

如何打开热模块更换，我使用的是 webpack-dev-server，这是我的 package.json

目前我需要刷新浏览器以反映代码中所做的更改，我猜启用 hmr 也会触发 css 更改。

我下载了 Aurelia Navigation Skeleton github repo的新副本 。我执行npm run server:dev:hot映射到cross-env NODE_ENV=development npm run webpack-dev-server -- --inline --progress --profile --watch --hot.

webpack-server 启动正常，我在控制台中看到 [HMR] 正在等待 WDS 信号。一切都很好，直到我在 js 文件中进行更改以触发 HMR 刷新。然后我在控制台中看到一个错误/警告。

我没有修改回购代码中的任何内容。

我正在尝试将热模块重新加载添加到我的打字稿项目中。我有以下设置：

包.json

tsconfig.js

webpack.config.js

我在资源管理器中收到以下错误消息：

GET http://localhost:3000/public/bundle.js 404（未找到）

似乎公共路径定义错误。请你能帮助我我做错了什么吗？

我的 webpack 看起来像这样：

从“webpack”导入 webpack；从“路径”导入路径；

巴别尔：

我想导入我的routes.js文件，它只是一个包含路由描述并使用 react-router 的小文件

当我尝试这样做时，它一直在说：

我该如何解决？

我正在尝试为https://github.com/martinandert/babel-plugin-css-in-js编写一个 webpack 插件，在开发过程中有以下两个要求：

• 我不希望将文件写入磁盘，而是让 webpack-dev-server 将文件托管在内存中。
• 我想要热重载来加载新提取的 CSS。

（问题在底部。）

不要写入磁盘

我已经能够使用如下代码做到这一点，但是在阅读了许多不同的示例之后，我仍然不能 100% 确定这是正确的方法。

热重载

我的想法是，每当 CSS 发生变化时，我都会渲染一个新版本的小模块，它会强制样式表重新加载。然后我会让 webpack 的 Hot Module Replacement 替换该模块，因此实际上对提取的样式表有 HMR。这个重载模块看起来像：

使用最新 CSS 的哈希生成文件的 webpack 插件代码如下所示：

然而，问题是我的重新加载器 JS 模块没有重新生成，我认为这是因为输入源没有改变，它只会在编译期间改变。

我的问题基本上是：

• 我以正确的方式接近这个吗？你知道我应该看的正确例子吗？
• 或者，有没有办法让我在不使用外部输入文件的情况下编译文件，但完全来自源代码？这样我就可以自己重新生成源代码并嵌入哈希，之后 webpack 应该会注意到差异并 HMR ，对吗？

有没有人真正拥有 HMR 并顺利运行？我的只是有时热插拔。这怎么可能？我将编辑一行文本，它会交换。然后我会去编辑相同的文本，它不会看到它。我正在使用 webpack 1.14。我花了太多时间在线搜索每个示例并重做和配置我的 webpack.config。如果没有一些关于如何使用每次都能工作的 webpack-dev-server 进行设置的真实文档，这件事就很难了。对于 stackOverflow 和 webpack GitHub 问题部分的所有未回答的问题，您会认为除了创建者和一些专家之外没有人真正理解它。

我有一个看起来像这样的 webpack 配置：

我的文件结构是：

我的 index.jsx 看起来像：

奇怪的是，当我进行更改时，有时会发生热插拔。其他时候根本没有。只是想知道是否有一些聪明的互联网圣人会理解为什么当前设置会发生这种情况。