问题标签 [webpack-hmr]

每当我对js文件进行更改时，我都会遇到浏览器实时重载的性能问题。在我的 gulp 设置中，我有以下手表：

js因此，只要文件发生更改，就会触发js和任务。lint它们如下：

使用此设置，文件更改时的 livereloadingjs不会扩展。随着项目变得越来越大，实时重新加载需要更长的时间。即使是一个包含十几个 JS 文件的小项目，每次重新加载也需要 3.8 秒。

我知道问题在于，在每次js文件更改时，您都会js对项目中的每个文件进行反应和捆绑，这是一项昂贵的操作，并且对于js您更改的文件以外的所有文件来说都是完全多余的。处理实时重新加载的更好方法是什么？我知道 webpack 使用热模块重新加载，有没有gulp等价的？

我无法使用 React HMR（和 Babel）设置 Webpack。在我看来，我的设置类似于我在这里和那里找到的许多示例：

我的package.json开发依赖：

（package.json 在这里完成）

还有我的babelrc配置

我的package.json脚本：

在我的网站上没有加载任何东西，我只是得到一个错误

未捕获的错误：locals[0] 似乎不是module启用了热模块替换 API 的对象。env您应该使用Babel 配置中的部分来禁用生产中的 react-transform-hmr 。请参阅自述文件中的示例：https ://github.com/gaearon/react-transform-hmr

Webpack 热重载（webpack-hot-middleware）非常适合客户端；每当文件更改时，它都会在客户端上重建和更新资产。但是对于通用/同构服务器，服务器需要预先呈现 HTML 响应，这是非常困难的。

天真的解决方案是在文件更改时重新启动（例如使用 nodemon）服务器，但这会关闭所有客户端连接，并且对于大型服务器来说，这非常慢。

更好的解决方案是手动查看资产（例如使用 chokidar），并在文件更改后再次清除缓存/要求。但是当还需要监视依赖项时，这需要额外的复杂性；必须解析文件以确定它们需要什么。

此外，如果代码库是用 compile-to-js 语言编写的，最好运行一个已编译的服务器用于生产（不再需要 babel-node）。对于已编译的服务器，不再可能使用上述机制，因为：

• webpack 对动态需求的支持很差：require(variable)与require('./file.js')
• 节点本身不能要求代码

在我的例子中，我将 require 函数抽象为一个使用babel-registered require 的包（之前我使用了 babel API，但它依赖于很多未记录的节点源）。

这是我目前在https://github.com/edge/cyc中使用的解决方案，它有点工作，但它是随意的并且有很多警告。一般来说，与 webpack 并行编写的自定义代码越多，就越偏离预期的行为。

有没有更容易复制 webpack 行为的可靠方法？

我正在尝试创建我的 React 项目的生产版本，但它选择了错误的配置。

在开发版本中，我使用 HMR（热模块更换）。这是在 .babelrc 中配置的，位于env > development > plugins. 添加额外节点env > production时，它似乎被忽略了。它仍在使用 HMR 的开发配置，这会导致错误：

未捕获的错误：locals[0] 似乎不是module启用了热模块替换 API 的对象。env您应该使用Babel 配置中的部分来禁用生产中的 react-transform-hmr 。请参阅自述文件中的示例：https ://github.com/gaearon/react-transform-hmr

当然，我已经检查了这些信息，但一切似乎都是正确的。当我从 .babelrc 的开发配置中删除 HMR 插件时，它可以工作，证明它确实使用的是开发配置而不是生产配置。这是我的文件：

包.json

.babelrc

正如您在 中看到的package.json > scripts > deploy，我什至明确地将 BABEL_ENV 设置为“生产”。

为什么会这样？如何确保生产版本忽略 HMR 插件？

顺便说一句，搜索经常会导致React-transform-HMR Github 页面上的 issue #5，这是一个没有明确解决方案的长线程。

编辑 2016.03.30：根据要求添加我的 webpack 配置的 Babel 部分。编辑 2016.04.06：根据要求添加整个 webpack 文件。

webpack.production.config.js

我正在使用 HMR 试用 webpack 2，但遇到了一个奇怪的问题。每次修改后，增量更新都会很快完成，然后Compilation needs an additional pass and will compile again.会显示消息。之后，构建完成需要几秒钟。

问题是每次更改后，构建（第二次传递）持续大约半秒，并且在一段时间后变得无法使用。

我正在使用带有样式、css、sass 和 babel 加载器的 webpack 2.1.0 beta 4。

我将不胜感激有关如何使构建时间保持不变的任何想法。

我从 Webpack 收到以下错误：

Invalid HMR message后面是一串非常详细的 JSON。

我真的找不到任何资源来更好地调试它。有小费吗？

如果有人可以让我了解为什么require在整个应用程序中使用它时找不到问题，那么奖金。

以下是一些细节：

• 运行节点/Babel
• 使用 Webpack

NPM 依赖项：

网络包配置：

我正在玩弄基于 Web 的 IDE 来构建 React 应用程序的想法。class基本上，用户完全在浏览器内定义和修改。

我知道我可以使用创建一个类，React.createClass但是当用户对类进行修改时如何删除或重新定义它。

我知道 Webpack HMR 可以做到这一点，但我怎样才能完全在浏览器中做到这一点？

我正在尝试使用热模块替换使用 Webpack 构建我的 React 项目。但是，Webpack 会忽略文件更改。我究竟做错了什么？我的配置：

我的文件结构：

如果模块文件位于“src”文件夹中，热模块替换工作正常，否则更改不会发生任何事情。

谢谢！

我正在开发一个 React 应用程序并设置了 webpack 来将我的代码打包成包。

但是，当我使用 React DevTools 在 Chrome 中加载我的应用程序并尝试通过扩展修改组件的道具时，它不会更改值或使用新值重新渲染。

下面是我的webpack.config.js

如果我做错了什么，请告诉我。

我还尝试删除HotModuleReplacementPlugin上面使用的并在没有webpack-dev-server. 他们都没有工作。

版本：

• 反应 - 15.0.1
• 反应开发工具 - 0.14.9
• 节点 - v4.4.1
• Chrome - Mac OSX 上的 49.0.2623.112（64 位）

我有一个简单的配置，webpack-dev-middleware它webpack-hot-middleware使用热重载（HMR）和反应。

一切正常，除了我对代码所做的每一次更改都需要 2 3-4 秒！直到我在浏览器中看到它。难道我做错了什么 ？它应该是这样的？

我的代码相当大，我的包缩小到 841kb（200kb gzipped）是这个原因吗？代码库越大，包创建越慢？

快递服务器：

webpack.hot.config.js

当我更改代码中的某些内容时，这就是我在控制台中得到的：