问题标签 [webpack-hmr]

我用webpack-dev-middleware了webpack-hot-middleware几个月，它工作得很好，但是现在，发生了一些事情，webpack 停止监视文件更改，所以只有在我重新启动应用程序时才会重新构建包。会发生什么？我在 Arch linux 上，fs.inotify.max_user_watches = 524288设置和:set backupcopy=yesvim 选项也已调整。会发生什么？怎么把东西找回来？

最初的捆绑发生，中间件正确加载，正如我在日志中看到的那样。这是在入口应用程序中加载 webpack 中间件的行。

和webpack.config.js

我使用webpackandhtml-webpack-plugin使用生成的脚本包更新我的 index.html 文件，例如bundle.[hash].js.

然后我必须运行webpack-dev-server，以便我可以将该包加载到内存中并利用热模块更换。

这使得代码编译两次。

但是，我想要的是webpack-dev-server也能够用新的 更新 index.html 文件bundle.[hash].js，因为现在我必须先webpack运行webpack-dev-sever. 编译两次似乎很奇怪。

同样，我运行的唯一原因webpack是使用捆绑包的新哈希更新我的 index.html 文件。如果我可以webpack-dev-server将更新的 index.html 输出到磁盘，那么我可以webpack完全放弃该命令。

这可能吗？如果是这样，webpack 配置会发生什么变化？我的 webpack 配置很长，所以我不认为在这里发布它会有所帮助。

我已经看到了一些边界案例和奇怪的开发者界面。

来自“摇动你的设备”，这真的不切实际，特别是用平板电脑

在Android Studio 周围工作以模拟按钮按下。

有没有一致的方法来做到这一点？我们不能使用实习生 API 在我们的应用程序中有一个调试按钮来启动这样的菜单navigator.popUpDevMenu()吗？

如果没有，您如何摇动平板电脑以使其正常工作。这也是为了解决如何在真实设备上配置 HMR。React native 确实改善了开发体验，但我会说特定的东西会减慢它的速度。

我刚刚为我们的开发环境实现了热重载。我的 javascript 被分成很多块。每次我对文件进行更改时，所有块都会重新提交。我正在运行 webpack-dev-server。

这是一个例子：

如您所见，实际上只构建了 mychange.jsx 文件。但是，其余的还是发出来的，变化用了整整 2.4 秒。

为什么是这样？我错过了 webpack 的一些设置吗？

当我运行 webpack --watch 并进行更改时，只会发出正确的块。所以，我知道它一定是我缺少的一些小东西。

我正在使用带有 Redux Devtools Chrome 扩展的 webpack 热模块替换（HMR）插件。但是，每当 HMR 运行时，Redux 本地应用程序状态都会重置为所有初始值。我的网络配置如下：

这是我的主要应用 index.js 的样子：

我想为react-hot-loader创建 Docker 容器。但是 inotify 可能在容器内不起作用。因此 HMR 被破坏了。

我使用 Docer for mac 版本 1.12.0-rc2-beta16（内部版本：9493）。

这是我的 docker-compose.yml。

我的 Dockerfile 在下面

我将react-hot-loader目录放在同一目录中。

当我执行时docker-compose up，我可以访问localhost:8000并且我的 React 项目运行良好。但是，即使我在本地机器上编辑我的 React 组件，HMR 也不起作用。

当我尝试在容器中编辑我的 React 组件时，HMR 运行良好。

此外，我检查了 inotify 是否使用inotify-tools运行良好。然后当我在本地机器上编辑文件时 inotify 不起作用。当然，当我在容器内编辑文件时，它运行良好。

我正在使用 grunt-webpack。尝试启动 webpack-dev-server 会出现此错误 Module parse failed: /u/saxenat/react-blueprint/src/js/app.jsx Unexpected token (5:16) You may need an appropriate loader to handle this file type.

在你结束这个问题之前，我只想说：webpack 正在正确地捆绑文件。该grunt-webpack插件提供 2 个任务：grunt-webpack和grunt-webpack-dev-server. 当我在服务器上尝试 HMR 时，它失败了。否则它工作正常。

我已经包含babel-loader了预设es-2015和react.

有任何想法吗？

该页面正确加载，甚至记录到客户端控制台[WDS] Hot module replacement enabled。但是当我对文件进行更改时，页面上没有任何反映。即使在重新加载。仅在重新启动服务器时。

不确定这是否重要，但我使用的是 redux。

webpack.config.js

.babelrc

redux 存储库有一组示例。问题是它们用于开发构建，我将它们用作应用程序的模板。

这个特定的示例 - https://github.com/reactjs/redux/blob/master/examples/real-world/webpack.config.js 构建一个 4MB 的 bundle.js。

我试过缩小代码，但我不能缩小包的大小。我究竟做错了什么？

我想在 React 组件中重复调用一个函数，从它挂载到卸载，并使其与 webpack HMR（热重载）一起使用。

最简单的方法是按照 ReactJS 文档中的建议在 componentDidMount 中设置间隔：[1]：https ://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

我已经搜索过，但找不到在 webpack HMR 为我们更新的组件调用 componentDidMount 之前清除间隔的解决方案。这意味着每次模块热重新加载时我们都有一个新的时间间隔。

注意：componentWillUnmount在 Webpack 重新打包之前不调用

更新：componentWillUnmount正确设置 HMR时应调用重新捆绑

使用 webpack HMR 实现重复延迟函数调用的最佳方法是什么？