升级Webpack 5与Node.js 18后Azure Pipeline构建步骤无限挂起求助

以下是针对该问题的具体排查和解决步骤：

1. 禁用Webpack 5持久化缓存 #

Webpack 5默认启用的持久化缓存可能在CI环境中因权限、缓存目录冲突或无持久化存储支持导致阻塞。修改webpack配置文件：

module.exports = {
  // 直接禁用缓存
  cache: false,
  // 或者改用内存缓存（更适配CI临时环境）
  // cache: { type: 'memory' },
  // 其他原有配置...
};

2. 兼容Node.js 18的OpenSSL行为 #

Node.js 18升级了OpenSSL版本，部分旧依赖可能因SSL配置逻辑问题导致阻塞。在Pipeline的build命令中添加兼容参数：

- script: NODE_OPTIONS="--openssl-legacy-provider" npm run build
  displayName: 'Build with Webpack'

3. 增强日志定位阻塞点 #

修改Webpack构建命令，输出详细进度日志，确认具体卡在哪个环节：

// package.json中更新build脚本
"scripts": {
  "build": "webpack --mode production --progress --verbose"
}

或者直接在Pipeline脚本中追加参数：

- script: npm run build -- --progress --verbose
  displayName: 'Build with verbose logs'

4. 检查Webpack插件兼容性 #

确保所有Webpack相关插件已适配Webpack 5版本，常见需升级的插件：

• html-webpack-plugin：需v5.0.0+
• mini-css-extract-plugin：需v1.0.0+
• copy-webpack-plugin：需v9.0.0+
  执行npm ls [plugin-name]检查插件版本，未适配的及时升级。

5. 优化CI环境依赖安装 #

用npm ci代替npm install，确保CI环境依赖版本与本地完全一致，避免依赖差异引发的问题：

- script: npm ci
  displayName: 'Install dependencies with npm ci'

6. 排查Windows Agent路径/权限问题 #

• 缩短Pipeline的工作目录路径，避免Windows路径长度限制导致文件处理阻塞；
• 确认Agent服务账户对项目目录有完整读写权限，可尝试在build前添加权限设置命令：

- script: icacls . /grant "Everyone:(OI)(CI)F" /T
  displayName: 'Set directory permissions'

内容的提问来源于stack exchange，提问作者Bogdan Lyashenko