问题标签 [webpack-hot-middleware]

我有一个应用程序，它使用 express 来提供一些 API 调用和 webpack 来为开发中的一些静态资产提供服务。在我将 nodemon 带入设置之前，一切正常。当我使用 nodemon 运行我的应用程序时，当我在 React 端（客户端）更新文件时出现此错误。

GET http://localhost:3004/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

如果我在没有 nodemon 的情况下运行我的应用程序，HMR 可以完美运行，并且所有更新和重新加载 React 模块。

在我的 package.json 文件中，我有以下脚本。开始的工作正常，但使用 nodemon 的开发人员在对 React 组件进行更改时会导致错误。

有什么想法可能导致这种情况吗？

这是我的 webpack 配置文件中的入口点。

这是我使用 webpackHotMiddleware 的 webpack 设置，我在 app.js 中调用它并将 App 传递给它。应用程序是我的快递服务器。

使用以下版本。

我决定尝试只使用 React 来渲染我用 JSX 编写的组件的服务器端。

我决定在客户端消除 React，因为没有太多的客户端交互，我想只有在需要时才添加它。

不过，我对这种方法有几个问题：

• 如何在客户端使用简单的 vanilla JavaScript？我仍在为我的组件使用 JSX。任何简单的例子，比如通过事件监听器处理按钮点击？

• 用这种方法带来整个热模块更换体验。现在我正在使用webpack --watch然后在任何文件更改时重新启动节点服务器，如本评论中所述。还有，哪里是纯SSR，怎么刷屏？现在我不必重新启动服务器，但我仍然必须刷新屏幕以反映我的更改。

有没有人能够成功地使用webpack-hot-middleware这种方法，它只是纯 SSR？

我正在使用 webpack 3.8.1 并收到以下构建警告的几个实例：

令人困惑的是，引用的“两个”文件只是一个文件——目录中没有两个文件的名称只是大小写不同。

我还注意到，如果文件受到这些警告的影响，我的热加载器通常不会获取对文件的更改。

什么可能导致此问题？

大约一周前，我在将 HMR 添加到我的项目时遇到了一个问题，问题是它不起作用，控制台显示 HMR 已启用并且还检测到文件的更改，但它没有重新渲染视图，控制台将记录：

但是在代码检查器中也不会在视觉上发生任何变化。

经过大量试验后，我发现问题是由 babel-loader 引起的，它以某种方式干扰了 webpacks HMR 电机或类似的东西。我通过排除 babel 加载器中的索引文件来解决它，但是我认为这不是最好的方法，因为现在我不能在我的 index.jsx 文件中使用一些 js 功能。我想知道是否有更好的方法来解决这个问题，可能是我的配置或设置 webpacks 热中间件的方式。

这是我的 webpack 配置：

这就是我在服务器中设置热中间件和 react-hot-loader 的方式：

提前致谢。

我是 Node JS 的新手。我正在使用 webpack-hot-middleware 创建一个带有热重载的后端 API 服务器。我尝试使用 webpack-dev-middleware 将服务器脚本（index.js）加载到内存并执行该 javascrip t 文件。

这是我的代码：链接

我发现我的代码可以成功地进行热重载，但是我无法加载服务器脚本（index.js）并启动我的 API 服务器。由于某些原因，我想使用 webpack-dev-middleware 而不是 webpack 开发服务器。

这是我的文件结构：

我找到了大量关于如何在呈现 HTML 的前端或后端服务器上执行此操作的教程，但我需要启动我的 index.js。

所以，我的问题是如何加载从 webpack-dev-middleware 生成的 js 文件并启动该 js 文件。

以下是我尝试的：

在 webpack.devserver.config.js 中：

结果：在 index.js 上更改某些内容后，代码似乎已成功重新加载，但是当我访问 /api/hi API 时看不到更改。

我正在尝试使用 webpack 设置自己的快速服务器以使用热模块替换和服务器端渲染。webpack-hot-server-middleware除了集成需要一个带有参数的快速中间件功能外，一切似乎都有效(res, req, next)- 但我无法弄清楚如何正确实现它。

这是我到目前为止的配置：

webpack.config.js

entry_client.js

entry_server.js

应用程序.js

路由器.js

服务器.js

Vue提供了一个HackerNews示例来演示如何进行服务器端渲染以及热模块重新加载支持。

基本上，客户端和服务器端代码被分成两个文件：编译成两个 json 文件entry-client.js和entry-server.js. 然后为每个编写两个 webpack 配置，并将它们编译成 JSON 文件。

然后，有用于处理两个 JSON 并提供内容的server.js服务器vue-server-renderer。

至于热模块重新加载，文件夹中有一个名为 setup-dev-server.js 的配置，用于build处理任务并将编译的内容存储在webpack-dev-middleware的文件系统中。

只要您只更改及其关联的模块，此设置就可以完美entry-client.js运行entry-server.js。但是，我想要做的是添加一个仅server.js与热模块重新加载支持一起使用的新模块。

一个例子是添加一个 RESTful API entry-api.js，：

并在server.js：

我设法编写了一个用于编译的 webpack 配置，entry-api.js它非常适合生产构建。至于热模块重新加载，对相关代码的任何更改都会entry-api.js触发重新编译，但这些更改永远不会实时反映。有人能告诉我我应该做些什么改变set-dev-server.js才能让它发挥作用吗？

参考：

我的 webpack 配置entry-api.js：

我还在GitHub 上打开了一个问题，我怀疑它会得到任何回应。

我已按照 webpack 4.1 文档中的建议，使用 webpack-merge 将我的 webpack 配置文件拆分为 3 个单独的文件，以将它们合并在一起。

• webpack.common.js
• webpack.dev.js
• webpack.prod.js

我遇到的问题是我正在使用webpack-dev-middleware和webpack-hot-middleware，我只需要在 webpack.dev.js 中使用它，但入口点需要使用

这在我的 webpack.common.js 文件中。这意味着 prod 和 dev 将在其入口点中包含“webpack-hot-middleware/client”。使用带有 webpack-merge 的设置，我如何才能在开发点而不是产品中仅使用“webpack-hot-middleware/client” ？

我尝试添加与此相同的条目。

然后在 webpack.dev 条目中： [ ${ROOT_DIR}/js/index, 'webpack-hot-middleware/client' ],

但这只会导致重复错误。

在将 webpack-dev-middle 与 express 服务器一起使用时，我想使用 webpack-hot-middleware 对提取的 css 文件进行工作（热重载）。

它适用于 webpack-dev-server。但我想将它与快递一起使用。

服务器.js

webpack.config.js

其他一切正常，当我构建时，我从 scss 获取 css 文件。我相信style-loader当它没有被提取但当我尝试它时似乎没有做任何事情时，这就是它的工作原理。

我使用 extract-text-webpack-plugin 找到了很多答案，但据我所知，这不适用于 webpack 4...所以我将 extract-loader 与 file-loader 一起使用。

我的应用程序使用 aurelia 和 webpack 构建在 asp.net core spa 中（基于 Rob Eisenberg 的教程）。它在 chrome 和 firefox 上完美运行，但在我需要支持的主要浏览器 IE 中，它存在热模块重新加载问题。我收到此错误： webpack-hot-middleware's client requires EventSource to work. You should include a polyfill if you want to support this browser

我npm install event-source-polyfill 在 devdependencies 中运行package.json，我补充说：

然后在我的webpack.config.js，我添加

如此处建议：https ://github.com/jods4/aurelia-webpack-build/wiki/Polyfills

我还添加了

然后我在里面 导入plugins了. 我住在 node-modules 文件夹中。我应该在某处手动复制它吗？那么我该如何实际使用它呢？我不知道在 aurelia 中该怎么做才能告诉它为 IE 使用这个 polyfill。到目前为止，错误仍然相同。webpack.config.jsimport 'event-source-polyfill/src/eventsource.min.js'event-source-polyfill