问题标签 [webpack-hot-middleware]

我有一个加载以下文件的自定义加载器data.js

当我更改上述文件（例如更改b值）时，应用程序会中断

这是自定义的 webpack 加载器

这是一个复制回购

我正在尝试在我的 Nuxt 应用程序中关闭 webpack-hot-middleware 的覆盖。

我尝试在 nuxt.config.js 中编辑配置，但覆盖仍然存在。

我有一个非常准系统的 express/webpack 设置，并按照说明使用webpack-hot-middleware，但是，每当我运行我的服务器时，我都会收到一连串警告和错误消息，这些消息引用node_modules我不知道需要这个才能工作错误的共同结束行是@./app @multi node ./app.js对这是否与我的 config.js 中的多条目设置有关，而不是缺少模块？

错误示例：

这是我config.json在节点v10.16.0和 npm上运行的6.9.0

我的webpack.config.js：

和app.js

缺少 node_modules 的列表，但我不认为这是问题所在：

aws-sdk, child_process, fs指向最有可能通过特定软件包安装的各种 node_module 文件夹

我正在构建一个我计划用于未来项目的基础网络服务器。我正在设置一个完整的 javascript 堆栈。我正在使用 Express、Webpack 和 Babel。

问题是在通过 Express 设置 hmr 时，配置文件遇到了验证错误。

配置文件在 webpack-dev-server 和 Express 的基本设置下运行良好。然而，当通过webpack(config)配置错误调用时。

webpack.config.js

webpack.config.babel.js

webpack.common.babel.js

服务器.js

错误

我正在将 Webpack 实现到旧版 Express 前端应用程序中。我已经按照说明实现了 webpack-dev-middleware 和 webpack-hot-middleware，但是我不知道如何实际引用 webpack-dev-middleware 在我的索引文件中构建的内存包。

server.js:

webpack.config.js:

Base view: server/views/index.jade:

注意：如果我禁用webpack-dev-middleware并仅使用 Webpack 构建文件，它们就可以正常工作。问题是（我认为）我在基本 index.jade 视图中使用该路径引用捆绑包的方式。由于 webpack-dev-middleware 将包写入内存而不是文件系统中的那个位置，它试图读取不存在的东西。

引用这些包路径的正确方法是什么，以便它们是来自 webpack-dev-middleware 的内存包？

项目布局：

• /
  • 服务器.js
  • webpack.config.js
  • 服务器/
    • 意见/
    • index.jade（我的基本视图）
  • 上市/
    • js/
      ...

我们正在开发一个应用程序，它使用 hapi 作为 web 服务器和 webpack-hot-middleware 进行热模块替换。

应用程序服务器在http://hostname:8080.

该应用程序通常可以通过访问。http://hostname/my/module/ 为了使http://hostname/my/module/运行的应用hostname:8080程序http://hostname/my/module/(...)在http://hostname:8080/(...).

现在在使用webpack-hot-middleware. 似乎，webpack hot-module-replacement 总是试图将其hmr端点（我认为用于检测/服务更改的 websocket）硬编码在/__webpack_hmr该端点上——如果打开根页面http://hostname/my/module/——解析为http://hostname/__webpack_hmr. 当然，这找不到，因此返回 404，因为运行的 IIShttp://hostname/不知道任何关于 webpack hmr 的信息。

现在，对于开发来说，使用自己的地址访问应用程序也可以，http://hostname:8080/但随后会发生 CORS 错误：

从源“ http://hostname:8080 ”访问“ http://hostname/__webpack_hmr ”资源已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

因此，即使我正在使用 访问应用程序http://hostname:8080，webpack-hmr 仍会尝试打开套接字http://hostname/__webpack_hmr，然后还会因 CORS 错误而失败。

是否有任何选项可以告诉webpack.HotModuleReplacementPlugin它应该将__webpack_hmr端点作为相对路径提供服务，因此它最终会成为http://hostname/my/module/__webpack_hmr（重写为http://hostname:8080/__webpack_hmr正确的地址）？

或者，如果这是不可能的，有没有办法在使用访问应用程序时至少让它工作http://hostname:8080/(...)？

我在文档中没有找到任何东西。只有在一些 Github 问题中提到了 WebpackpublicPath配置，但我没有看到它对我有什么帮助。

更新 我更进一步并检测到webpack-hot-middleware在 w​​ebpack 配置中设置入口点以"webpack-hot-middleware/client?path=http://hostname/my/module/__webpack_hmr"使 __webpack_hmr 端点在正确的位置可用。

但现在的下一个问题是 HRM 文件

• dist.XYZ.hot-update.json
• distbundle.XYZ.hot-update.js 也试图直接位于根目录下（/dist.XYZ.hot-update.json, /distbundle.XYZ.hot-update.js）。是否有可能使这些位置相对/为它们设置特定的子目录？

添加另一个 IIS 重写以将这些路径重写为类似的东西http://localhost:8080/dist.XYZ.hot-update.json，但我更喜欢一个解决方案，而不必为此配置 IIS。

我有一个标准的文件夹结构，有点像这样：

整个dist文件夹由 webpack 构建，包括index.html刚刚从文件夹中复制的src文件。当我想在开发环境中运行时，该文件index.html需要客户端水合才能工作。如果它们不存在，那么只有服务器端呈现的页面会通过。这样做的问题是，如果不在每次文件更改时完全重建文件夹，我就无法进行任何开发工作，这需要很长时间，而且是一种完全低效的开发方式。/dist/app.js/dist/vendor.jsdist

我的 webpack 客户端构建配置是这样的：

以上仅在我执行时运行npm run build:client。我的开发设置是这样的：

上面的配置永远不会在更改任何其他文件时setup-dev-server.js重建文件夹中的app.js或vendor.js文件，这意味着开发模式毫无意义。./dist我该如何解决这个问题，以便Home.vue对例如的任何更改都会触发重新创建，app.js因此vendor.js我的更新实际上可以工作？

在尝试设置我的新开发环境（节点服务器 + 客户端，只有 vanilla js）时，我遇到了 webpack-hot-middleware 来热重新加载我的前端更改。一切都会好的，但是如果有这样的代码

与热重载后相比，当您单击 $button 时，此事件侦听器将比以前多触发一次！非常不舒服，但我没有从任何人那里发现任何类似问题的报告。谁能帮我解决这个问题的可能解决方法？

我正在运行一个非常简单的mern堆栈代码。我正在使用webpack-dev-middleware和webpack-hot-middleware。问题是当我运行时node server.js，编译工作没有错误，但我没有看到我对浏览器上的客户端代码所做的任何更改，即使使用热模块，浏览器也不会自行刷新。也许上述两个问题都是因为我在代码中遗漏了一些东西。

编辑：当我使用 webpackdevmiddleware 时，我的程序正在从磁盘中提取包。例如，如果我清空我的 bundle.js，那么即使服务器打开，我的浏览器实际上也会拉出一个空文件，它可以观察文件更改并成功编译它，但浏览器不会反映它们。感觉就像浏览器不是从任何内存中提取它，而是从磁盘中提取它。

Webpack.config.js：

服务器.js

添加我的开发工具截图

我正在使用 --watch 命令运行 webpack，以使用 webpack.HotModuleReplacementPlugin 编译我的浏览器代码。它似乎一直在寻找一个 http://localhost/3df194f7935a8d2781e4.hot-update.json 直到下一次更新才会生成。这是流程：

1. 使用启动服务器webpack --watch 这将生成以下控制台输出

   我的 dist 文件夹包含以下内容：

2. 在浏览器中加载网页，检查网络GET http://localhost/3df194f7935a8d2781e4.hot-update.json日志

3. 修改浏览器代码以触发 HMR 更新。这会生成下一个输出：

   我的 dist 文件夹包含以下内容：

   所以我的 dist 输出现在包含它在 2 步前寻找的热更新，但不包含网站现在正在寻找的当前 hot-update.json。

所以这里的基本问题是如何让我的 webpack watch 输出当前构建的 hot-update.json 文件，而不是之前的构建？

这是 webpack 配置的副本