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://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 [email protected] 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: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
+ [email protected]
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

According to Microsoft's documentation, it seems that a "webpack" command in the script section of your YAML pipeline should do the trick:

- script: webpack

The condition is: "To have this work, make sure that webpack is configured as a development dependency in your package.json project file. This will run webpack with the default configuration unless you have a webpack.config.js file in the root folder of your project."

They also mention you need to do this after your compilation and tests. There's a suggestion that you can move this logic out of the pipeline and into your code by using script objects in package.json:

- script: npm run build

Source: Microsoft docs

EDIT: The way I've done it is the with the 2nd recommendation. I have this in my MVC ASP.NET project file:

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

and build-prod for example is just a script in the webpack.config.js:

"build-prod": "SET NODE_ENV=production && webpack -p --color" build-dev has the -d argument instead but that's all...