问题标签 [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 投票
0 回答
389 浏览

logging - 使用 HMR 时启用 Console.log 输出到 Webpack

我正在使用 Webpack 的 HMR。

当我从终端运行 webpack 时,我得到了 Weback 自己的所有输出,但我自己在应用程序中的任何日志记录都只写入浏览器控制台,而不是终端中 webpack 的输出(我使用的是LogLevel,但同样是真的 a console.log()) 。是否可以将控制台输出通过管道传输到 Webpack 以便在终端中显示?

0 投票
4 回答
2987 浏览

reactjs - 使用 react-redux 的 create-react-app 的 HMR

没有为使用create-react-app. 有一篇关于如何在这里启用它的博客文章:http: //chrisshepherd.me/posts/adding-hot-module-reloading-to-create-react-app

我正在尝试做类似的事情,尽管我已经添加reduxreact-router-redux混合:

应用程序.js

路由.js

index.js

但是,我只是收到此错误:

Warning: [react-router] You cannot change <Router routes>; it will be ignored

有什么方法可以将 HMR 入侵到这个项目中吗?

0 投票
0 回答
342 浏览

javascript - Webpack 为单个文件禁用 HMR

试图为具有我不想重新加载的集中状态对象(不是 Redux/React)的项目找出 HMR 设置。

创建一个总是拒绝重新加载的模块的粗略模式是什么?

大多数应用程序都直接需要这个状态文件,所以我需要确保模块没有被换出。

0 投票
1 回答
747 浏览

javascript - Webpack HMR 不适用于 Node-Webkit/NW.js

我有的

我使用以下配置文件创建了一个小型 Webpack HMR Hello World:

然后我webpack-dev-server从一个 npm 脚本运行并在http://localhost:8080/app.js. 我将此文件包含在我的文件中,index.html并且所有内容(包括 HMR)在浏览器中都可以正常工作。

问题

我通过 npm安装了 NW.js(Node-Webkit),并将其设置index.htmlmain. package.json该应用程序可以正常工作,但是当我编辑文件时,HMR 不会发生。为什么它在浏览器中工作时在 NW.js 中不起作用?

0 投票
2 回答
1499 浏览

javascript - 反应路由器 Webpack HMR。根路由必须渲染单个元素

我试图弄清楚当 HMR 启用并遇到以下错误时,react-router 如何在 AppContainer 内工作。你能解释一下黑客是怎么回事吗?

Invariant Violation:根路由必须渲染单个元素

索引.js

路由文件是:

主视图组件:

主页查看路线:

PS:SubView 等于 HomeView。

0 投票
1 回答
360 浏览

javascript - 是否可以在不使用查询字符串的情况下传递 webpack 条目项配置选项?

所以我有以下用于热重载的 webpack 服务器配置:

entry看起来像这样:

现在最初我有这个:

但是在webpack-hot-middleware上创建问题后,我从开发人员那里得到了这条评论,解释说查询字符串格式将配置应用于客户端,而其他格式将其应用于服务器。

我的问题是,有没有办法应用reload=true不使用查询字符串,我发现这种格式真的很难遵循并且难以跟踪。

0 投票
2 回答
2324 浏览

webpack-dev-server - Webpack 热模块替换不会注入更新的代码

我一直在尝试使用 Webpack-Dev-Server 配置 Webpack 2 Hot Module Replacement。

webpack.config.js如下:

我有这个文件夹结构:

我认为我需要index.js像这样使用 HMR API:

问题是当我在控制台中更改代码时,我得到:

镀铬控制台

但是 HMR 似乎没有对渲染进行任何更改。

有人可以帮我解决这个问题吗?

非常感谢

0 投票
1 回答
194 浏览

webpack-dev-server - react-hot-loader 仍然重新加载而不是 HMR

我有如下所示的webpack.config.jswebpack-dev-server ,运行using npm run dev,每当检测到更改时,它仍然会导致硬重新加载而不是 HMR

在此处输入图像描述

求大神指点,哪里出错了,谢谢

webpack.config.js

.babelrc

包.json

0 投票
1 回答
194 浏览

webpack - webpack 重建时 webpack 只能打印 emmited 文件信息吗?

我已经使用这些包来遵守 webpack HMR:

  • webpack@2.2.1
  • webpack-dev-middleware@1.10.1
  • webpack-hot-middleware@2.17.1

webpack 统计配置:

使用 webpack-dev-middleware

每次我运行 command 时npm run dev,控制台都会打印资产信息,例如:

但是当我使用 webpack HMR 重建我更改的文件时,控制台将打印所有资产信息,包括 emmited 文件和不相关文件,就像:

我只想知道我更改过的文件,而不关心无关的文件信息。

那么,你能帮我让 webpack 只打印这些 emmited 文件信息吗?

0 投票
0 回答
81 浏览

webpack - 如何使用 3rd 方 Web 服务器设置 Webpack HMR 服务

我正在编写一个 React 应用程序,并使用 Webpack 将其分解为多个块——清单、第 3 方和多个应用程序块。

然而,与典型的 Webpack 应用程序不同,我没有使用 Node 来服务这些块——Web 服务器是自定义构建的 Golang 服务器。当源文件被编辑时,我将使用 [something] 来制作新的包,并且我的 Golang 服务器中有代码可以监视对包的更改。

但是,我不知道客户端在运行时期望什么,就服务器如何以及将什么推送到客户端而言。

是否有足够详细地描述此过程的文档或示例代码?