MSBuild 和 Webpack

Question

我正在 VS2015 中开发 Angular2 应用程序，并为此设置了 webpack 捆绑和缩小环境。

这是我的webpack.conf.js

switch (process.env.NODE_ENV) {
    case 'prod':
    case 'production':
        module.exports = require('./config/webpack.prod');
        break;
    case 'test':
    case 'testing':
        //module.exports = require('./config/webpack.test');
        break;
    case 'dev':
    case 'development':
    default:
        module.exports = require('./config/webpack.dev');
}

我还安装了一个 webpack 任务运行器，它使用以下命令调用它

cmd /c SET NODE_ENV=development&& webpack -d --color

和

cmd /c SET NODE_ENV=production&& webpack -p --color

设置似乎工作正常。但是，我想将它与我的 TFS 构建集成 CI。 webpack 命令应该在项目构建后触发，并在 webpack 构建失败时报告构建失败。我尝试将以下代码合并到我的 .csproj 文件中

<Target Name="AfterBuild">
<Exec Condition="$(Configuration) == 'Debug'" Command="cmd /c SET NODE_ENV=production&& webpack -p --color">
</Exec>
</Target>

失败并出现错误 9009

之后我尝试了，从安装 webpack 的 node_modules 文件夹启动命令

<Target Name="AfterBuild">
<Exec Condition="$(Configuration) == 'Debug'" Command="./node_modules/.bin cmd /c SET NODE_ENV=production&& webpack -p --color">
</Exec>
</Target>

还是徒劳。即使我让它工作，我也不确定如果它在 webpack 中遇到错误是否会导致 VS 构建失败。

我该如何继续？

Answer 1

将不同的脚本放入 package.json 用于开发和生产模式。然后在 visual studio 的 'AfterBuild' 事件中，在不同的配置上调用这些脚本。

在package.json中添加以下两个脚本，'buildDev'和'buildProd'：

"scripts": {
    "buildDev": "SET NODE_ENV=development && webpack -d --color",
    "buildProd": "SET NODE_ENV=production && webpack -p --color",
  }

在 visual studio 的 AfterBuild 事件中添加这两个条件命令：

<Target Name="AfterBuild">
    <Exec Condition="$(Configuration) == 'Debug'" Command="npm run buildDev" />
    <Exec Condition="$(Configuration) == 'Release'" Command="npm run buildProd" />
  </Target>

最后 webpack.conf.js 这样：

switch (process.env.NODE_ENV.trim()) {
    case 'prod':
    case 'production':
        module.exports = require('./config/webpack.prod');
        break;
    case 'dev':
    case 'development':
    default:
        module.exports = require('./config/webpack.dev');
        break;
}

Important Note: Make sure to use trim() function with process.env.NODE_ENV as cmd will treat the blank space in the command "SET NODE_ENV=development && webpack -d --color as character and append it in NODE_ENV variable. So when we are setting it as 'development', it actually gets set as (development + whitespace).

Answer 2

对于 TFS CI 构建，您可以参考这些步骤来实现您的要求。

添加 npm 步骤
添加命令行步骤

注意：有-bail参数，这是必需的，否则即使webpack命令抛出异常，step/task也会成功。

此外，您可以在构建定义中添加变量（变量选项卡）

MSBuild 和 Webpack

MSBuild and Webpack

msbuild

continuous-integration

msbuild-task

tfsbuild

webpack