如何使用Webpack热中间件/ Webpack热重发与IIS重写/相对基Url？

Question

我们正在开发一个应用程序，使用hapi作为We服务器，使用webpack热中间件进行热模块替换。

应用服务器在http://hostname:8080上运行。

应用程序通常可以通过http://hostname/my/module/访问，以使http://hostname/my/module/服务于运行在hostname:8080下的应用程序，我们使用的是IIS重写，它可以重写从http://hostname/my/module/(...)到http://hostname:8080/(...)的所有内容。

现在，当使用webpack-hot-middleware进行开发时，问题就出现了。看来，webpack热模块替换总是试图使其hmr端点(我认为用于检测/服务更改的websocket )硬编码在/__webpack_hmr上，如果根页http://hostname/my/module/被打开，它将解析为http://hostname/__webpack_hmr。当然，这是找不到的，因此返回404，因为运行在http://hostname/上的IIS不知道webpack hmr的任何信息。

现在，对于开发来说，使用自己的地址http://hostname:8080/访问应用程序也是很好的，但是接下来会发生一个CORS错误：

CORS策略阻止从源“

”访问“http://hostname/__webpack_hmr”的资源:请求的资源上不存在“访问控制-允许-原产地”标题。

因此，即使我正在使用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问题上提到Webpack的publicPath配置，但我不知道它如何能够帮助我。

Update I更进一步，并检测到将webpack配置中的webpack-hot-middleware入口点设置为"webpack-hot-middleware/client?path=http://hostname/my/module/__webpack_hmr"使__webpack_hmr端点在正确的位置可用。

但下一个问题是人力资源管理文件

• 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的解决方案。

Answer 1

尝试添加它，而不指定实际的域名和端口。

// 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