在VSTS中使用Powershell运行Webpack

Question

以this帖子为起点，我遵循了此处概述的基本步骤。

1. 在代理上安装webpack
2. 获取webpack的安装路径
3. 从确切的安装路径运行webpack

我已经在本地测试过，脚本运行正常。一旦将它作为构建的一部分放在VSTS上（只是代理程序上的powershell任务），它就会起作用，直到执行webpack命令（其中什么都不返回）为止。没有任何输出。

Write-Host `nInstalling webpack and webpack-command
npm install --no-save --no-package-lock -g webpack webpack-command

Write-Host `nGetting the environment variables for webpack
(Get-Item -Path ".\" -Verbose).FullName
$env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")
$webpackOptions = Get-Command -CommandType Application -ErrorAction SilentlyContinue -Name webpack | Select-Object -ExpandProperty Definition

Write-Host `nThe options:
$webpackOptions | Write-Host

Write-Host `nSelected:
$webpack = $webpackOptions -Match 'cmd' | Select-Object -First 1
Write-Host $webpack

# On the build agent it is at this point that I get blank results
# On my local machine I get the paths such as:
#    C:\Users\Admin\AppData\Roaming\npm\webpack.cmd --config webpack.css.config.js
# The results of webpack running
Write-Host `nPacking webpack.config.cs
Write-Host $webpack --config webpack.config.js
& $webpack --config webpack.config.js

# Same as above
Write-Host `nPacking webpack.css.config.cs
Write-Host $webpack --config webpack.css.config.js
& $webpack --config webpack.css.config.js

有人有什么想法吗？这对我来说尤其奇怪，因为当我打印Webpack的selected路径时，它似乎找到了我期望的值，即它打印了C:\npm\prefix\webpack.cmd

Answer 1

我在使用npm和package.json来运行脚本和安装依赖项的地方进行工作。

1. npm install webpack webpack-cli --save-dev-这些是运行Webpack所需的依赖项，您可以将webpack-cli与webpack-command交换，如果需要的话，重量显然更轻
   • 这是在本地完成的，而不是作为构建步骤。在package.json更新时检入。
2. 在package.json中创建构建步骤。我创建了两个：build和build-prod
3. 在vsts构建中创建两个npm步骤。
   • 第一个只是一个npm install，用于安装所有软件包
   • 第二步是运行package.json脚本的自定义步骤。在我的情况下，文字为run build-prod

就是这样！

---

package.json和两个我必须调用的webpack脚本：

{
  ...
  "scripts": {
    "build": "webpack --config webpack.config.js && webpack --config webpack.2.config.js",
    "build-prod": "webpack -p --config webpack.config.js && webpack -p --config webpack.2.config.js"
  }
  ...
}

最后是任务的图片。