Azure DevOps - 如何在部署期间使用 webpack 构建 bundle

Question

我一直在尝试使用 Azure DevOps Repos 和 Pipelines 将 Web 应用部署到本地 IIS。

我想在 Azure DevOps 服务上使用 webpack 构建 bundle ，而不是将已捆绑的 javascript、样式文件上传到 Azure Repos。

仅供引用，应用程序使用 ASP.NET Core 2.2、webpack 4.30、webpack-cli 3.3.2 和 webpack.config.js 的配置(包含在“dist”文件夹中创建 bundle 的大量设置)和 javascript、样式文件位于 wwwroot 文件夹中。

到目前为止，如果我将“dist”文件夹中已捆绑的文件上传到 Repos，则效果很好。但我想仅上传源文件，并让 Azure DevOps Repos 或 Pipelines 构建 bundle 并使用它创建工件。

到目前为止，我一直在尝试使用 azure-pipelines.yml

- task: NodeTool@0
  inputs:
    versionSpec: '12.x'

- task: CmdLine@2
  inputs:
    script: |
      cd (folder) 
      cd (other folder-where package.json is located)
      npm install -g webpack webpack-cli --save-dev
      npm install
      npx webpack --config webpack.config.js

或

- task: CmdLine@2
  inputs:
    script: |
      cd (folder)   
      cd (folder)
      npm install webpack webpack-cli --save-dev
      webpack
      npm run build (which is just 'webpack')

两者都不起作用。看起来 npm install 可以工作，但它甚至不运行 webpack 部分。因为我在 webpack.config.js 文件上使用“webpack-messages”，所以我期待一些消息，例如“正在构建某些包...”，但它没有显示任何有关 webpack 进程的消息。以下消息来自构建日志。

Starting: Webpack install and build
==============================================================================
Task         : Command line
Description  : Run a command line script using Bash on Linux and macOS and cmd.exe on Windows
Version      : 2.163.0
Author       : Microsoft Corporation
Help         : https://learn.microsoft.com/azure/devops/pipelines/tasks/utility/command-line
==============================================================================
Generating script.
========================== Starting Command Output ===========================
"C:\windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "d:\a\_temp\fc9874eb-1e72-4a4f-82af-2d3b62451eb7.cmd""
npm WARN rollback Rolling back <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6b4a3a7a2a7a4aaa3ebb5b2b4a3a7ab86f4e8f5e8f0" rel="noreferrer noopener nofollow">[email protected]</a> failed (this is probably harmless): EPERM: operation not permitted, scandir 'D:\a\1\s\something\something\node_modules\fsevents\node_modules'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f593869083909b8186b5c4dbc7dbc4c4" rel="noreferrer noopener nofollow">[email protected]</a> (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ee8fdebf8ebe0fafdcebfa0bca0bfbf" rel="noreferrer noopener nofollow">[email protected]</a>: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="651200071504060e4806090c25564b564b5454" rel="noreferrer noopener nofollow">[email protected]</a>
+ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="681f0d0a18090b03285c465c59465e" rel="noreferrer noopener nofollow">[email protected]</a>
added 388 packages from 217 contributors and audited 5566 packages in 31.587s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

我也尝试过发布管道。我添加了来自 Dealogic 的“npm install”、“npm custom”或“命令行”或“webpack”扩展等任务，但它们都不起作用，因为我无法指定 package.json 在 Azure DevOps Cloud 上的位置机器。

请告诉我是否可以，如果可以，如何做。

Answer 1

根据 Microsoft 的文档，YAML 管道的 script 部分中的“webpack”命令似乎应该可以解决问题:

-脚本:webpack

条件是:“要实现此功能，请确保在 package.json 项目文件中将 webpack 配置为开发依赖项。这将使用默认配置运行 webpack，除非您有项目根文件夹中的 webpack.config.js 文件。”

他们还提到您需要在编译和测试后执行此操作。建议您可以使用 package.json 中的脚本对象将此逻辑移出管道并移至代码中:

- 脚本:npm run build

来源:Microsoft docs

编辑:我这样做的方式是第二个建议。我的 MVC ASP.NET 项目文件中有这个:

 <Target Name="AfterBuild">
    <Exec Condition="$(Configuration) == 'Debug'" Command="npm run build-dev" />
    <Exec Condition="$(Configuration) == 'Release'" Command="npm run build-prod"/>
</Target>

例如，build-prod 只是 webpack.config.js 中的一个脚本:

"build-prod": "SET NODE_ENV=生产 && webpack -p --color"build-dev 有 -d 参数，但仅此而已......