Azure DevOps - how to build bundles using webpack during deployment

Question

I have been trying to deploy an web app to local IIS by using Azure DevOps Repos and Pipelines.

I would like to build bundles using webpack on Azure DevOps service rather than uploading already bundled javascript, style files to Azure Repos.

FYI, App uses ASP.NET Core 2.2, webpack 4.30, webpack-cli 3.3.2, and configs with webpack.config.js (contains bunch of settings to create bundles in 'dist' folder) and javascript, style files are in wwwroot folder.

So far it works fine if I upload to Repos with already bundled files in "dist" folder. But I would like to upload only source files and let Azure DevOps Repos or Pipelines to build bundles and create artifacts with it.

So far, I have been trying to use 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

or

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

both don't work. It seems npm install works but it doesn't even run the webpack part. because I use 'webpack-messages' on webpack.config.js file so I am expecting some messages such as "Building something bundle..." but it does not show any message regarding webpack process. Below messages are from a build log.

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://docs.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 readable-stream@2.3.6 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: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-cli@3.3.11
+ webpack@4.41.6
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

I tried also on release pipeline. I added tasks such as 'npm install', 'npm custom', or 'command line' or 'webpack' extension from Dealogic, but none of them works since I can't specify where package.json is located on the Azure DevOps Cloud machine.

Please let me know if it is possible, and if so, how to do it.

Answer 1

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

- script: webpack

条件是：“要完成这项工作，请确保将 webpack 配置为package.json项目文件中的开发依赖项。这将使用默认配置运行 webpack，除非webpack.config.js项目的根文件夹中有文件。”

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

- script: npm run build

来源：微软文档

编辑：我这样做的方式是第二个建议。我的 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=production && webpack -p --color" build-dev 有-d参数，但仅此而已......