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

Question

我有一个Angular 2和Webpack 2的起始程序，通过webpack-dev-server在node上运行，并且我想通过Web API从Visual Studio运行它。

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

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

那么，如何将它们结合起来？在同一个端口上运行？还是其他解决方案？

- Shlomi Levi

Answer 1

我找到了！-与现有服务器的结合

摘要和示例：

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

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

在这种情况下，即使在由后端服务器发送的HTML页面上运行，您也需要教给webpack生成的资产向webpack-dev-server发出请求。 另一方面，您需要教您的后端服务器生成包含指向webpack-dev-server上资产的脚本标记的HTML页面。 除此之外，您还需要在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模式。

当您使用inline模式时，只需在Web浏览器中打开后端服务器URL。 （如果使用iframe模式，请打开webpack-dev-server的/webpack-dev-server/前缀URL。）

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

- Shlomi Levi

---

你有没有一个带有我们所使用的webpack配置的git示例或者一个好的链接，其中包含示例代码？ - squadwuschel

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服务器。

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

- nehfi

---

是的！通过这个简单的答案，痛苦的日子终于过去了。我需要确保IISExpress使用的端口与Vue不同，但这个方法起作用了。在VS2019中调试asp.net core 3.1，在VSCode中调试Vue/Quasar。非常感谢！ - Jay Borseth

简短而精炼的程序相关内容。 - randow_user_1234

Answer 3

接受的答案适用于版本1。如果您正在使用版本2，则可以使用Vue模板来启动。

基于现有的Vue模板，我制作了一个Vue模板，您可以使用vue-cli进行安装。该模板为您提供了一个Vue应用程序的起点，您可以扩展或将其集成到现有环境中。

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

devwatch:

这个模板有一个额外的run devwatch选项，它会监视文件更改，而不是使用webpack-dev-server。这使得它可以在任何现有的web服务器环境中使用。它使用livereload来在更改时更新您的浏览器。

npm run devwatch

开发者:

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

npm run dev

构建：

为生产环境构建您的项目：

npm run build

- Delcon

---

Webpack-dev-server 提供了额外的构建速度，而这种方法不会使用内存中的文件。 - Edza

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

- Mark Z.