2

我们正在开发一个应用程序，它使用 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。

4

1 回答 1

0

尝试在不指定实际域名和端口的情况下添加它

// Add hot reloading in development
  entry: [
    'webpack-hot-middleware/client?reload=true&path=/my/module/__webpack_hmr',
  ],

或者，您可以使用dynamicPublicPath并设置正确的publicPath

// Add hot reloading in development
  entry: [
    'webpack-hot-middleware/client?reload=true&dynamicPublicPath=true',
  ],

在此处查看文档https://github.com/webpack-contrib/webpack-hot-middleware

于 2021-04-05T21:52:38.883 回答