问题标签 [webpack-hmr]

Webpack 开发服务器由于未知原因正在引导两次。（请注意，只有开发服务器有这个问题，如果我捆绑文件，一切运行正常）。

我看到这条线执行了两次：

我还可以在浏览器日志中看到此行两次：

这些是使用的版本

我的代码没有使用 HMR 重新加载时遇到问题。我正在使用 CLI webpack 开发服务器。可以看到更改并且 webpack 会重新编译，但站点不会重新加载。

控制台日志：

此错误是注入的 Webpack 代码的一部分：

我的代码基本上是这样的：https ://github.com/jaredpalmer/react-production-starter除了我将它切换到 Koa2。在此过程中，由于各种原因，我无法在 HMR 中使用 build，所以现在我求助于外部服务器。

我的配置：

我调用 webpack 服务器：

可能是什么问题？似乎 webpack 正在接收无效信息来解析，但我不知道它应该是什么或来自什么。

客户端 index.js 文件与此处相同。

我重新安排了提供初始渲染的代码，但它们非常相似。这是原始服务器代码。主要是我把它变成了一条包罗万象的路线router.all('*')，并稍微改变了 html，但大部分都是一样的。以下是脚本标签：

该client/index.js文件在底部包含以下内容：

然而，它从未被调用。

有人可以发光吗？

由于某种原因，大多数页面刷新都会重新请求 bundle.js 文件，并且从 localhost 下载大约需要 10-15-20 秒。这一切都来自 localhost，并且 bundle.js 文件的大小约为 1mb。对该文件的请求似乎只是爬行，一次加载几千字节。

一些观察：

• 经过一番挖掘后，从 __webpack_hmr 对服务器的初始调用似乎停滞不前，但我不确定这个调用是在调用 bundle.js 之后发生的。下面是服务器请求流的日志。

• 它仅在具有超过一两个组件的页面上很慢，即。主页以外的任何内容。这暗示了它可能与热模块重新加载有关的想法。

• 与其他页面一样，主页仍将花费 > 5 秒（有时 10-20 秒），但如果我使用 Ctrl+R 刷新页面，它几乎会立即返回。如果我进行地址栏刷新，则需要更长的时间。无论我是 Ctrl+R 还是重新加载地址栏，其他页面仍然需要同样长的时间......
• 更新：我删除了热模块替换，这似乎是问题的根源，因为没有它，页面会立即加载。

请求日志：

-- 响应时间 GET / = 609ms
--> GET / 200 647ms 2.55kb
<-- GET /main.aafc9fb7f6a0c7f127edb04734d29547.css --
> GET /main.aafc9fb7f6a0c7f127edb04734d29547.css 200 17ms.jskb -4
<bundle 3.4
> GET /bundle.js 200 18ms 1.29mb
<-- GET /__webpack_hmr

然后在 chrome 控制台中，对于这个请求，它显示：

这是我的设置：

• 使用 Koa 作为服务器环境（在初始响应中使用流/分块）
• 使用带有热模块重新加载的 webpack
• 使用 Vue.js 作为前端框架，带有服务器端渲染
• bundle.js 通过典型的 serve-static 包提供服务
• bundle.js 似乎根本没有被缓存。为什么是这样？

在 Koa 方面，我从一些样板包开始做所有这些服务器端渲染等。自从我开始搞乱这个设置和一般的 webpack 以来，这种情况一直在发生，所以我试图深入了解它。它似乎有点随机，有时它会在 < 1 秒内返回，但大多数时候需要 10 多秒。有时30多秒？！

我也尝试使用不同的库来提供静态文件，但它们似乎都这样做了。

这是我的主要 webpack 配置（'webpack.client'，在下面扩展）：

还有这个（扩展前一个）：

这是我的 Koa 服务器 index.js 文件：

任何人都知道为什么 HMR 初始请求会花费这么长时间，而且似乎很随机（有时是 5 秒，有时是 30 秒）？技术。

我已经尝试了所有发现的方法来使用 elixir + webpack + vue + hot module reload 设置 laravel 5.3，但我无法实现。

当我执行 gulp watch 时，我无法通过热模块重新加载来运行 webpack 开发服务器。我已经搜索了几天的解决方案，但没有找到任何东西。

你知道如何设置吗？

我正在运行一个快速服务器，它将充当我的 React 应用程序的 API，该应用程序由 webpack-dev-server 捆绑和提供服务。

我正在尝试让热模块更换工作，并且几乎就在那里，当我对我的文件进行更改时，我在控制台中得到了这个：

但应用程序永远不会重新渲染，除非手动刷新。不知道这是否相关，但是当我更新我的.scss文件时，它会在没有手动操作的情况下刷新，并且会按照我的预期进行更新。

版本：

"webpack": "2.1.0-beta.22"

"webpack-dev-server": "2.1.0-beta.8"

"react-hot-loader": "3.0.0-beta.5"

我尝试了最新的 webpack，但它给了我无法克服的验证错误。

我正在通过: 运行 webpack "webpack": "webpack-dev-server --port 4000 --env.dev"，并且我的快速服务器正在运行http://localhost:3000。

这是我的webpack.config.babel.js：

这是我.babelrc的，我打电话的地方react-hot-loader

有没有办法去除热更换模块的代码？我什至没有使用它，我的配置文件中没有任何内容告诉 webpack 生成它，而且它仍在生成无论如何都不会触发的代码if (false)。

你能禁用 webpack 中的热模块吗？

我正在使用 gulpwebpack-stream插件，效果很好，但是我确信我缺少一些东西来让它工作。

我使用 Browsersync 对我的 HTML 进行自动页面刷新，CSS 更改而不重新加载整个页面并且它可以工作。它也不会翻页到顶部以应用更改并保持元素的状态持久化，例如输入文本。

有什么更好和有​​用的 Webpack 的热模块重新加载功能可以做到 Browsersync 不能，但是对于特定的用例和具有特定框架的项目，Browsersync 没有能力？

我很难将依赖项添加到新生成的 react-boilerplate 项目中。我面临这个错误：

像这样将此依赖项添加到 package.json 之后：

以及现有的 index.html，例如 app/containers/App/index.js

如果我从 index.js 中删除 import 语句，错误就会消失。

我不知道发生了什么，所以任何建议都会受到赞赏。

更多细节：

我开始克隆这个存储库：

https://github.com/mxstbr/react-boilerplate

然后我运行 npm run setup。然后我将依赖项添加到feathers-client，我得到了错误。

我还应该提到，当我添加诸如 request、feathers-rest 和 request-promise 之类的依赖项时，我会遇到类似的错误。

如果我添加诸如蓝鸟之类的依赖项，我不会遇到错误。

我还没有找到一个明确的模式来解释什么依赖关系会导致这个错误。

当我按照angular2-webpack-starter（https://github.com/AngularClass/angular2-webpack-starter）说明进行操作时，在运行以下命令时，我在增量构建期间遇到了一些严重的性能问题：

npm run server:dev:hmr

初始构建只需要大约 30 秒，但是，如果我触摸其中一个文件以启动增量构建更新，它会比初始构建花费更长的时间！

当我向我的应用程序添加内容时，这种延迟变得更糟，仅对于“资产优化”部分就超过了 2 分钟。

我尝试将devtool选项更改为无效。

这是一些环境信息：

• Windows 7 专业版，64 位
• angular2-webpack-starter@5.0.5
• 节点 v4.4.3
• npm 3.10.2

我想在一个用TypeScript编写的NodeJS项目中启用Webpack HMR。

但module.hot不可用：

• @types/webpack-env定义：

  /li>

• 与@types/node定义冲突：

  /li>

删除@types/node可以解决问题，但会禁用process：