使用VSTS持续集成ASP.NET Core 2.0+React项目时Webpack执行失败求助

我来帮你梳理几个常见的原因和对应的解决办法，这类CI环境下的依赖问题大多和路径、安装方式或者环境上下文有关：

• 优先考虑本地安装webpack，替代全局安装
  全局安装在CI环境经常会遇到环境变量、权限或者路径配置的问题，更稳妥的方式是把webpack作为项目的开发依赖安装：

  1. 本地执行npm install webpack --save-dev，将webpack添加到项目的package.json的devDependencies中
  2. 在VSTS流水线的命令步骤里，使用本地的webpack路径来执行命令：
     • Windows环境：node_modules\.bin\webpack --config webpack.config.vendor.js
     • Linux环境：./node_modules/.bin/webpack --config webpack.config.vendor.js
       或者更简便的方式用npx webpack --config webpack.config.vendor.js，npx会自动查找项目本地的webpack包

• 检查全局webpack的路径是否在CI Agent的PATH中
  如果你坚持要用全局安装，需要确认全局安装的webpack所在目录是否被加入了Agent的环境变量PATH：

  1. 在流水线中添加一个命令步骤，输出当前的PATH变量：
     • Windows：echo %PATH%
     • Linux：echo $PATH
  2. 执行npm config get prefix查看npm全局包的安装前缀，webpack应该在[prefix]/bin目录下
  3. 如果这个路径不在PATH里，需要在流水线中添加步骤手动将其加入，比如Windows下执行set PATH=%PATH%;%APPDATA%\npm，Linux下执行export PATH=$PATH:$(npm config get prefix)/bin

• 确认流水线步骤的执行顺序和工作目录

  1. 确保npm install（或全局安装webpack）的步骤在执行webpack命令之前运行
  2. 检查webpack命令是否在项目根目录下执行，如果不是，需要先通过cd命令切换到正确的目录，比如cd $(Build.SourcesDirectory)/你的项目目录 && webpack ...
  3. 对于Hosted Agent，有时候缓存的node_modules可能导致问题，可以添加步骤清理缓存：rm -rf node_modules package-lock.json（Linux）或rmdir /s /q node_modules && del package-lock.json（Windows），然后重新执行npm install

• 验证webpack是否可被调用
  在流水线中添加一个测试步骤，执行webpack --version（全局安装）或npx webpack --version（本地安装），如果这个步骤失败，就说明确实是路径或安装的问题，再针对性排查

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