如何让webpack和iis express一起工作？

Question

我有Angular 2和Webpack 2启动程序,它们通过webpack-dev-server在节点上运行,我可以从visual studio使用web-api运行它.

问题是angular2-webpack-starter在端口3000上运行webpack-dev-server,而IIS Express在不同的端口5000上运行.

这对我来说非常重要,因为我想使用HMR并在每次更改文件时重新加载.

那么,如何将它们组合在一起呢？在同一个端口上运行？或任何其他解决方案？

Answer 1

我找到了 ! - 结合现有服务器摘要和示例:

您可能希望在开发中运行后端服务器或模拟它.您不应该使用webpack-dev-server作为后端.它的唯一目的是提供静态(webpacked)资产.

您可以并排运行两个服务器:webpack-dev-server和后端服务器.

在这种情况下,您需要教会webpack生成的资产,即使在后端服务器发送的HTML页面上运行时也向webpack-dev-server发出请求.另一方面,您需要教您的后端服务器生成HTML页面,其中包含指向webpack-dev-server上资产的脚本标记.除此之外,您还需要webpack-dev-server和webpack-dev-server运行时之间的连接,以在重新编译时触发重新加载.

要教webpack向webpack-dev-server发出请求(用于块加载或HMR),您需要在output.publicPath选项中提供完整的URL.

要在webpack-dev-server与其运行时之间建立最佳连接,请使用带有--inline的内联模式.webpack-dev-server CLI自动包含一个建立WebSocket连接的入口点.(如果将webpack-dev-server的--content-base指向后端服务器,也可以使用iframe模式.如果需要与后端服务器建立websocket连接,则必须使用iframe模式.

使用内联模式时,只需在Web浏览器中打开后端服务器URL即可.(如果使用iframe模式,请打开webpack-dev-server的/ webpack-dev-server /前缀URL.)

https://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

Answer 2

我遇到了同样的困境，只需在 webpack 开发服务器配置中使用代理选项即可解决它：

module.exports = {
    devServer: {
        contentBase: './dist', /* output folder */
        proxy: {
            '/api': {                                 /* I had only to track calls to api, change path to one you need*/
                target: 'http://localhost:15536/'     /* specify your correct IIS port here */
            }
        }
    },
/*other configurations here*/
}

代码到位后，只需运行 VS 项目并同时启动 WebPack Dev 服务器。现在，来自应用程序的所有调用都将重定向到您的 ASP.NET 服务器。

如果有任何问题，请告诉我。