Question

我有Angular 2 and Webpack 2 starter 在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 / prefixed URL。）

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

Answer 2

接受的答案是版本1.如果您使用的是版本2，则可以使用vue模板开始使用。

根据现有的vue-templates，我制作了一个vue模板，您可以使用vue-cli进行安装。此模板可以快速启动您可以扩展或集成到现有环境中的vue应用程序。

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

<强> devwatch：

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

npm run devwatch

<强> dev的：

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

npm run dev

<强>构建

构建生产项目：

npm run build

Answer 3

我遇到了同样的难题，只是使用webpack开发服务器配置中的proxy选项解决了这个问题：

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

让我知道是否有任何问题。

Answer 4

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

不知道为什么，但是问题与托管模型有关，所以我只是如下修改了.csproj，此后它仍然可以正常工作：

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

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

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

4 个答案: