VSTS托管构建中的Webpack

Question

我们正在使用VSTS上托管的构建代理来构建和发布我们的ASP.NET Core代码到Azure App服务。

我的问题是：我们能否在VSTS上托管的构建中运行WebPack以处理前端任务，还是必须在将代码检入我们的存储库之前手动完成？

更新： 我正在利用可在VSTS上使用的新ASP.NET Core Build（预览）模板 - 请参见下文：

这里是开箱即用的步骤：

- Sam

---

你如何运行 WebPack？Build vNext 非常可定制，如果需要，你可以轻松添加 PowerShell 或 cmd 调用。 - DaveShaw

@DaveShaw 我更新了原帖。我正在使用VSTS上可用的ASP.NET Core Build。你是说，我可以添加一个运行PowerShell脚本的新步骤。在我的情况下，我想我会把它作为第二个步骤，即在还原之后但在构建之前。 - Sam

是的，那样可以行得通。另一种方式可能是将其放入 project.json 中的 .NetCore 的发布任务中，但我不知道怎么做，我的 .NET Core 应用程序可以自动完成 :) - DaveShaw

@Sam，您的问题描述不够清晰。能否提供更多细节信息以便我们更好地理解您的问题或疑问。您可以将Azure应用服务部署ARM添加到构建/发布定义中，以便将其部署到Azure。 - starian chen-MSFT

@Sam 你的意思是Angular 2 webpack吗？尝试使用Npm构建步骤运行。 - starian chen-MSFT

Answer 1

我们正在为VSTS开发一个扩展，目前处于测试阶段，你可以申请分享。

请查看VSTS市场和此GitHub代码库。

- jkanczler

Answer 2

Webpack绝对不是VS2015和VSTS的一流公民。在我的情况下，为了使webpack适用于CI/CD，我必须进行优化，这真的让我头疼，特别是因为webpack被匆忙引入以解决大型单体SPA（ASP.NET 4.6，Kendo，15,000个文件，2000个文件夹）的可怕性能问题。简而言之，在尝试了许多场景后，为了确保新构建的捆绑包最终出现在IIS和Azure Web应用程序中，我进行了两次构建。 VSTS任务序列如下：npm install global，npm install local，npm webpack install local，npm webpack install global，build pass 1，webpack，build pass 2等...这适用于托管和私有代理，只要您提供webpack的正确路径，因为webpack在主机和私有代理中安装在不同的位置（没有找到选择webpack安装位置以实现一致性的方法）。在开始构建之前，我会清除所有内容。还需要在VS2015解决方案中执行以下操作：（1）卸载“built”文件夹，（2）在项目文件中添加Content Include =“Built \ StarStar”。“built”文件夹包含捆绑包，应该显示为灰色，否则会有更多的坏惊喜和不稳定性要处理...

VSTS BUILD 中的 Build-Pass #2 任务允许收集由 Build-Pass #1 生成的新包，并自动将它们包含在要发布的包中。

如果没有第二个构建步骤，收集包并将它们合并到 zip 包中是一场噩梦，特别是当您需要解压然后重新压缩 15,000 个文件时（每个文件需要 300 毫秒！！）。我没有找到可以在 VSTS 中方便使用的文件合并功能。

我正在关注是否有人提出更有效的 webpack CI/CD 方案。与此同时，我的两次构建解决方法运行良好，但确实很慢。

我预计 ASP.NET Core、Angular 2 和 webpack 的进步将会优雅地解决这个问题。

- Thierry Queensland