MSBuild和Webpack

我正在VS2015中开发Angular2应用程序，并为此设置了一个网页包捆绑和缩小环境

这是我的webpack.conf.js

开关（进程环境节点）{
案例“prod”：
“生产”案例：
module.exports=require（'./config/webpack.prod'）；
打破
案例“测试”：
案例“测试”：
//module.exports=require（'./config/webpack.test'）；
打破
案例“dev”：
“发展”案例：
违约：
module.exports=require（'./config/webpack.dev'）；
}

将不同的脚本放在package.json中，用于开发和生产模式。然后在VisualStudio的“后构建”事件中，在不同的配置上调用这些脚本

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

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

在visual studio的后生成事件中，添加以下两个条件命令：

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

<强>注释：请确保使用Sturn.Env.NoDeEnEv使用Stime*函数，因为CMD将处理命令< St>中的空白空间将NODE_ENV=development&&webpack-d--color设置为字符，并将其附加到NODE_ENV变量中。因此，当我们将其设置为“开发”时，它实际上被设置为（开发+空白）

---

对于TFS CI构建，您可以参考以下步骤来实现您的需求

添加npm步骤

添加命令行步骤

注意：有–bail参数，这是必需的，否则即使webpack命令引发异常，步骤/任务也会成功

---

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

也许您只需要一个空白？在最后的第二个代码段中，将此

SET NODE\u ENV=production&

替换为此-

SET NODE\u ENV=production&

。我知道这很傻。但这是我能提供的！：这不是很慢吗？这意味着您在每个C#build上都运行wepack，这可能很容易使您的构建时间增加20秒，否则将增加1秒。@eamonnerbanne我同意，这将增加构建时间。根据不同的情况，可以使用不同的组合来运行webpack命令。例如，我在调试模式下使用webpack--watch命令，并且仅在发布模式（即夜间构建）下使用上述解决方案。如果你能想出更好的解决方案，请建议：）谢谢你的快速回复-我会试一试，但我想我的机会不大…仅供参考：如果有人得到3倍大小的bundle.js文件，那么知道是-d参数导致Webpack 2出现这种情况（它导致源地图文件被烘焙到其中）。在Visual Studio 2019中，以下操作可能有效

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