如何让 webpack 和 iis express 协同工作?
Posted
技术标签:
【中文标题】如何让 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>
【讨论】:
以上是关于如何让 webpack 和 iis express 协同工作?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Webpack 捆绑 Express Js (NodeJs) 和 Pug 引擎?