React项目npm build脚本本地正常，Azure DevOps流水线执行失败

我有一个React项目的package.json配置如下：

{
  "name": "webforms-react-sample",
  "version": "1.0.0",
  "description": "Sample projects for hosting React apps in a WebForms application.",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --config webpack.dev.js",
    "build-dev": "npx webpack --config webpack.dev.js",
    "build-prod": "npx webpack --config webpack.prod.js"
  },
  "author": "Dimitris Vardalis",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "css-loader": "^6.7.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "style-loader": "^0.23.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "react-hot-loader": "^4.6.5",
    "react-router-dom": "^5.2.0"
  }
}

本地执行build-dev脚本完全正常，但在Azure DevOps的Windows最新版本代理流水线中执行时，出现如下报错：

npm WARN exec The following package was not found and will be installed: webpack@5.75.0
CLI for webpack must be installed.

> webforms-react-sample@1.0.0 build-dev
  webpack-cli (https://github.com/webpack/webpack-cli)

We will use "npm" to install the CLI via "npm install -D webpack-cli".
> npx webpack --config webpack.dev.js

Do you want to install 'webpack-cli' (yes/no): 
##[warning]Couldn't find a debug log in the cache or working directory
##[error]Error: Npm failed with return code: 1

已在执行build步骤前完成npm包安装，且未配置npm缓存步骤以避免旧文件缓存问题，流水线分为两个步骤，但问题依旧。

1. 替换npx调用方式，避免交互式询问 #

报错核心是npx在非交互式的流水线环境中弹出安装询问，导致进程卡住退出。虽然devDependencies已包含webpack-cli，但npx可能未正确识别本地包。修改scripts，直接调用本地node_modules中的webpack：

"scripts": {
  "start": "webpack-dev-server --mode development --config webpack.dev.js",
  "build-dev": "webpack --config webpack.dev.js",
  "build-prod": "webpack --config webpack.prod.js"
}

如果路径识别仍有问题，可明确指定本地包路径：

"build-dev": "./node_modules/.bin/webpack --config webpack.dev.js"

2. 检查流水线npm安装命令 #

确保流水线中的npm安装命令未跳过devDependencies，默认npm install会安装所有依赖，但如果使用了npm install --production会忽略dev包，需移除该参数。

可在安装后添加验证步骤，确认webpack-cli存在：

# Windows代理执行
dir node_modules/.bin/webpack-cli
# 或检查版本
./node_modules/.bin/webpack --version

3. 清理依赖后重新安装 #

在流水线的安装步骤前，添加清理命令，避免残留文件干扰：

# Windows代理执行
rmdir /s /q node_modules
del package-lock.json
npm install

4. 锁定依赖版本 #

将webpack和webpack-cli的版本改为固定值（移除^），避免npm自动安装不兼容的升级版本：

"devDependencies": {
  // ...其他依赖
  "webpack": "5.75.0",
  "webpack-cli": "5.0.1",
  // ...其他依赖
}

内容的提问来源于stack exchange，提问作者Luis manuel del Valle