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;
}

重要说明:确保对process.env.NODE_ENV使用trim()函数,因为cmd会将命令"SET NODE_ENV = development && webpack -d --color"中的空格视为字符,并将其附加到NODE_ENV变量中.所以当我们将其设置为"开发",它实际上被设置为(开发+空白).