如何让 webpack 和 iis express 协同工作？

Posted 2023-03-07

【中文标题】如何让 webpack 和 iis express 协同工作？

【英文标题】：How to get webpack and iis express to work together?

【发布时间】：2017-03-12 03:34:56

【问题描述】：

我有Angular 2 and Webpack 2 starter ，它通过 webpack-dev-server 在 node 上运行，我用 web-api 从 Visual Studio 运行它。

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

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

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

【参考方案1】：

我找到了！ - 与现有服务器结合 总结和例子：

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

您可以并排运行两个服务器：webpack-dev-server 和您的后端服务器。

在这种情况下，您需要教导 webpack 生成的资产向 webpack-dev-server 发出请求，即使在后端服务器发送的 html 页面上运行时也是如此。另一方面，您需要教您的后端服务器生成 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

【讨论】：

你有我们为这个解决方案工作的 webpack 配置的 git 示例或示例代码的良好链接吗？

【参考方案2】：

接受的答案是版本 1。如果您使用的是版本 2，则可以使用 vue 模板来帮助您入门。

基于现有的 vue 模板，我制作了一个 vue 模板，您可以使用 vue-cli 进行安装。此模板可帮助您快速创建一个可以扩展或集成到现有环境中的 vue 应用程序。

npm install -g vue-cli
vue init delcon/webpack-simple
cd my-project
npm install

开发观察：

此模板有一个额外的 run devwatch 选项，用于监视文件更改，而不是使用 webpack-dev-server。这使其可用于任何现有的网络服务器环境。它使用 livereload 来更新你的浏览器的变化。

npm run devwatch

开发者：

要使用默认的 webpack-dev-server 运行它，请删除 index.html 中的 <script src="http://localhost:35729/livereload.js"></script>：

npm run dev

构建：

构建您的生产项目：

npm run build

【讨论】：

Webpack-dev-server 提供额外的构建速度，此方法没有（内存中的文件）。

【参考方案3】：

我遇到了同样的困境，只是通过使用 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 服务器。

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

【讨论】：

是的！痛苦的日子以这个简单的答案结束。我需要确保 IISExpress 使用的端口与 Vue 不同，但这是可行的。在VS2019中调试asp.net core 3.1，在VSCode中调试Vue/Quasar。谢谢！

又短又甜

【参考方案4】：

在我的 ASP .NET Core 2.2 Vue JS SPA 中，使用 IIS Express（而不是“项目”）运行时，在 Web 控制台中显示 HMR Connected，但实际上没有收到和更新任何更改...

不知道为什么，但问题与托管模型有关，所以我只是修改了 .csproj，如下所示，此后它运行良好：

  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
    <AspNetCoreHostingModel>OutOfProcess</AspNetCoreHostingModel>
  </PropertyGroup>

  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
    <AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel>
  </PropertyGroup>