问题标签 [webpack-hot-middleware]

我在尝试让 webpack-dev-middleware/webpack-hot-middleware 与我的快速服务器一起工作时遇到了障碍。如果我直接运行 webpack 配置，它运行良好，但是当我尝试从中间件运行它时，它不会解析 JSX。

这是我的配置

这是我的中间件 app.js 钩子

这是我在运行服务器时看到的错误

webpack/hot/only-dev-server webpack-hot-middleware/client?quiet=true ./lib/ui/index.js 76 bytes {0} [built] + 260 hidden modules

webpack/hot/only-dev-server webpack-hot-middleware/client?quiet=true ./lib/ui/index.js

当我直接运行 webpack 配置时，它构建没有任何错误。请帮助，我完全被卡住了。我在 react-hot-loader 的 v3 上。

我有一个基本设置，两个应用程序分别位于一个单独的目录中，我使用自定义服务器使用webpack-dev-middleware/编译它们webpack-hot-middleware。除了我无法让 HMR 为第二个应用程序工作（我正在使用react-hot-loader）之外，一切都运行良好。

这是说明问题的最小回购：https ://github.com/AmrN/multi-react-app-hmr

我的主要代码文件：

webpack.config.js

服务器.js

(app1|app2)/index.js

现在如果我运行服务器，我的文件编译正确，可以访问http://localhost:3000/app1/index.html成功，HMR在这里工作正常。但是，如果我访问http://localhost:3000/app2/index.html它打开的第二个应用程序，但 HMR 无法正常工作并查看控制台，它会给我以下错误：

GET http://localhost:3000/app2/640a44b6b47b67436af2.hot-update.json 404（未找到）

[HMR] 找不到更新（需要完全重新加载）

[HMR]（可能是因为重启了服务器）

我注意到的另一件事是更改我在 server.js 中应用我的应用程序 webpack 配置的顺序：

[config1, config2].forEach((config) => {...})

到：

[config2, config1].forEach((config) => {...})

将问题切换到 app1，现在 HMR 适用于 app2 但不适用于 app1。

任何帮助表示赞赏，谢谢。

我正在为 express 运行 webpack-hot-reload 和 webpack-dev-server 中间件。

我的 webpack 配置：

我的 index.js

Webpack 稍后添加了更多配置：eslint、babel-loader 等。我认为它不会改变任何东西。当我更新我的一个减速器时，我仍然收到以下错误。

以下模块无法热更新：（需要完全重新加载）./client/reducers/user.js

user.js但是当我在reducer/index.js App.js 文件中重新加载组件时它工作正常，该文件也是热重新加载的。我该如何解决这个问题？

I'm trying to use webpack-hot-middleware to hot reload the modules of my application. I'm using webpack-dev-middleware as well.

Here is my setup.

package.json

webpack.config.js

srcServer.js

The setup is not working. The compilation works fine when I update my code, and when I refresh my browser, the new application code is executed. However the modules aren't replaced.

Output in browser console

Network Traffic

Please help me solve this issue. Thanks!

我正在使用 Webpack 开发一个包含多个页面的 Web 应用程序。在开发环境中，我希望 Webpack 服务器根据文件路径打开 url 中不同目录下的 index.html 文件，例如：http://localhost/index/file/to/the/directories/，然后是 index .html 文件自动提供，无需在 url 中输入 index.html。使用插件的 Webpack 服务器：webpack-dev-middleware、webpack-hot-middleware。有没有办法实现这个使命？

项目目录如下：

项目中使用了Vue.js，下面的代码进行了简化。

webpack.conf.js：

dev-server.js 如下：

现在，我启动服务器，在浏览器中打开网址：http://localhost:3000/directoryA/。我希望它会打开目录下的 index.html 文件，但事实并非如此。我怎样才能让它工作？

我想在每次更改时拦截从 wds 到客户端的连接，以便在它刷新/热重新加载之前我想获取一个可以注入角度应用程序的令牌。我使用 devServer.setup() 向 webpack 开发服务器添加了一个预处理器中间件。这负责拦截连接。

但是我如何将这些值从开发服务器传递到应用程序？！

我正在考虑在 webpack.config 中使用 definePlugin。但是在那里定义的变量在 wds 服务器中是不可访问的。

有没有其他方法可以在编译期间将这些令牌传递或注入到应用程序中？！这给我带来了另一个问题，wds express 中间件是在文件编译之后还是之前调用的？！

我遇到了一个问题webpack-hot-middleware，当我打开浏览器或选项卡（chrome 和 FF）的多个实例时，我会在触发每个视觉操作时对所有这些实例进行刷新或更新。
例如，在一个选项卡上滚动会触发另一个选项卡上的滚动。
有人遇到过这种行为吗？这是我的 webpack 配置：

当然，除了传递 webconfig 之外，我没有插件的特殊配置：

我在我们的项目中使用 DllPlugin 和 DllReferencePlugin，第一次构建时一切正常。这意味着 DLL 运行良好。但是说到HMR，生成的hot-update.js里面填的是：

在控制台中，它说：[HMR] Cannot check for update (Full reload needed)

我正在使用 webpack 3.4.1，一个带有 webpackHotMiddleware@2.15.0 的 webpack 编译器，有人在同时使用 HMR 和 DLL 时遇到问题吗？

热模块重新加载不适用于HtmlWebpackPlugin. 我实际上可以在控制台中看到我的文件正在更新，但浏览器没有呈现更新的应用程序。

相关链接

存储库：https ://github.com/developer239/workbox-webpack-react/tree/ssr 服务器文件：https ://github.com/developer239/workbox-webpack-react/blob/ssr/server.js

Webpack 基础：https ://github.com/developer239/workbox-webpack-react/blob/ssr/webpack.common.js

Webpack 开发：https ://github.com/developer239/workbox-webpack-react/blob/ssr/webpack.dev.js

Package.json：https ://github.com/developer239/workbox-webpack-react/blob/ssr/package.json

环境

npm 4.2.0

节点 7.10.0

我试图弄清楚这个几个小时。你能帮帮我吗？

我正在尝试为一个项目制作一个快速的样板，但在重新加载页面时遇到了一个问题。

我的代码中有这段代码app.js：

当我启动页面时，我可以看到H1添加到 DOM 中，但是当我进行更改时（例如Greetingsto Marie的参数），它不会更新当前页面，而是添加一个新元素等等。

所以我在我的 DOM 中有：

代替

我真的不知道热重载的幕后发生了什么，但似乎它并没有更新整个页面！

任何帮助将不胜感激！

顺便说一句，这是我的 webpack.config 文件：