问题标签 [webpack-hmr]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
4276 浏览

javascript - vendor.js:未捕获的类型错误:使用 webpack 时无法读取未定义的属性“应用”

这发生在热模块重新加载或刷新时。不知道为什么会这样。我必须重新启动构建过程才能再次引导应用程序。

一切正常,直到 2 个热模块重新加载,然后构建因错误而中断

vendor.js:未捕获的类型错误:使用 webpack 时无法读取未定义的属性“应用”

下面是我的配置文件:

我找不到太多关于这个错误的信息。我还清除了浏览器缓存并删除了所有 cookie,但无济于事。

我还检查了 vendor.js 文件。它被缩小了,但我可以看到它在热模块重新加载功能上中断。任何帮助将非常感激。感谢期待。

0 投票
0 回答
159 浏览

node.js - 热更换模块后服务器无法访问(Webpack)

当我进行更改时,我在终端中看到了这个:

但在此之后,我不能再做任何事情了,如果我刷新我看到这个:

它曾经工作,但因为我从这个更新:

对此:

它不起作用了。

这些是我用来运行的 2 个命令:

这是我的 dev.config 的链接:dev config

知道可能是什么原因造成的吗?

提前致谢。

0 投票
1 回答
869 浏览

javascript - Emacs 中的 Webpack HMR 与串模式

我最近开始研究 webpack,因为能够编写真正的 CSS 模块、智能捆绑和其他东西的很酷的特性,还有 HMR,这就是我在这里的原因。我见过一些 React Redux 项目的例子,它们可以在不重新加载浏览器的情况下更新 javascript 代码。哇,我认为这是不可能的。

我想知道更多,尤其是它在底层是如何工作的,以使其与我当前的项目 Vanilla JS 一起工作。

与此同时,我对函数式编程语言的兴趣使我接触了 Emacs。我发现在 emacs 编辑器中有一个可以更新 javascript 和 HTML的串模式!实时,无需重新加载浏览器。

我知道他们都使用本地服务器将更改推送到浏览器和客户端上的一些脚本,以某种方式更新代码。但是它们如何保存应用程序的状态。就 React 项目而言,这是可以想象的,由于应用程序基于组件的性质,您可以将组件替换为新组件,但我不确定它们如何搜索变量并为它们重新分配新值。也许他们确实使用了一些 eval 魔法。但我不确定。

  1. 那么它们究竟是如何工作的呢?也许我从错误的角度看,我只是没有清晰的画面。

  2. Emacs 也有 HTML 的实时更新,webpack HMR 能做到吗?
    (我不太关心 HTML,因为我是用 JS 做的。但我认为它可以解释这两者之间的区别。)

  3. 这样做哪个更好?
    每个的优点和缺点是什么,或者它们只是世界的不同部分,可以整合成更好的东西?

  4. 也许有更好的选择,不需要像本地网络服务器这样的中间件,而只是编辑器插件与一些浏览器扩展通信?

PS:我不介意学习可以优化我的工作的工具,因为它总是有回报的。

0 投票
2 回答
7163 浏览

webpack - Redux Saga 热重载

我正在做一个 React & Redux 项目。该项目曾经使用 webpack-dev-middleware 和 hot middleware 进行热重载。

在我将 Redux Saga 添加到项目中,并将 saga 中间件添加到 redux store 之后。似乎每当我更改 saga 代码时,热重载都会中断并显示错误消息:

Provider> 不支持store即时更改。您很可能会看到此错误,因为您更新到 Redux 2.x 和 React Redux 2.x,它们不再自动热重载减速器。有关迁移说明,请参阅https://github.com/reactjs/react-redux/releases/tag/v2.0.0

我知道 Saga 使用生成器并且它是时间相关的。是否可以使用 Sagas 热重载页面?就像 Redux reducer 在热重载期间如何替换自己一样。

谢谢!

0 投票
3 回答
6048 浏览

javascript - index.html 使用 webpack-dev-server 不重新加载

当我在运行时更改我的app.jsmain.csswebpack-dev-server,捆绑包会更新。但是当我更改index.html内容时不会刷新;如果我在 HTML 中添加一行,webpack-dev-server则不会刷新页面上的任何内容。这是我的webpack.config.jspackage.json文件。我希望你能帮助我。

webpack.config.js

包.json

我的目录结构:

目录中的每个文件dist都是由 webpack 生成的。

0 投票
1 回答
593 浏览

macos - Hot Module Replacement not working with Mac / Vagrant

I'm using the latest (v3) react-redux-starter-kit. Everything went fine, a new project is set up except the HMR: It does not reload, I can't see my changes. I checked the browser's console: [HMR] connected

After some more investigation I figured out that if I make the change inside the Vagrant box (logged in) HMR does work! So it must be a filesystem-level issue between the host machine (Mac OSX) and the Vagrant box.

Has anyone had this issue before?

UPDATE: I found and installed a Vagrant plugin called vagrant-notify-forwarder. Now it should be forwarding the fs events to the guest system. But HMR still out of order ... In this thread someone mentioned that only the ATTRIB changes are sent to the guest system. I'm not sure if thats enough for the HMR ...

UPDATE 2: I'm trying to set up another tool called Guard/Listen. If anybody knows how to use it that'd probably solve this question. But for me no luck so far ...

0 投票
1 回答
1161 浏览

webpack - 为什么 webpack-dev-server 中需要 inline 和 hot 标志来启用热重载

在我看到的每一篇文档或文章中,使用我们需要使用的 webpack-dev-server 启用 HMR webpack-dev-server --hot --inline,有趣的是,即使我省略了hot标志并且只保留inline在我的代码库中 HMR 仍然有效。所有的文件都是旧的还是我做错了?

我没有devServer在我的 webpack 配置中定义任何选项,这是我的 web-pack 配置

这是我的package.json脚本

这是整个代码

0 投票
1 回答
742 浏览

angular - Webpack 将运行时的副本添加到包中

有谁知道为什么我在捆绑包中得到重复的 webpack 运行时?

它在 ? 之后添加多个数字 并且浏览器将它们视为新文件。

  • 开发服务器.js?
  • 开发服务器.js?52d4
  • 开发服务器.js?53d4*

webpack-dupes

查看左侧的文件树: webpack-dupes2

为什么要这样做?我只想要捆绑中文件的一份副本。

0 投票
2 回答
2636 浏览

reactjs - React 开发人员工具显示“代理组件”而不是组件的名称

我正在Webpack使用Hot Module Reloading. 我还在开发时使用 chrome 扩展React Developer Tools来检查反应树。当我检查页面并查看组件树时,我想查看实际组件的名称,但是,对于每个组件,名称都显示为Proxy Component.

我可以让你知道更多关于我的细节Webpack,但我什至在谷歌上努力寻找正确的东西来解决这个问题。

以下是我用于 webpack 的工具:

webpack.config.js

0 投票
1 回答
3459 浏览

typescript - 打字稿和 HMR 不起作用

我有使用 Typescript、ReactJS 和 Webpack 构建的前端应用程序。
我正在尝试启用 HMR。
这些是启动脚本

这是我的 ts-loader

还有我的开发服务器配置

我无法克服错误