MSBuild and Webpack
Solution 1
Put different scripts in package.json for development and production mode. Then on 'AfterBuild' event of visual studio, call those scripts on different configurations.
Add following two scripts, 'buildDev' and 'buildProd' in package.json:
"scripts": {
"buildDev": "SET NODE_ENV=development && webpack -d --color",
"buildProd": "SET NODE_ENV=production && webpack -p --color",
}
In AfterBuild events of visual studio add these two conditional commands:
<Target Name="AfterBuild">
<Exec Condition="$(Configuration) == 'Debug'" Command="npm run buildDev" />
<Exec Condition="$(Configuration) == 'Release'" Command="npm run buildProd" />
</Target>
And finally webpack.conf.js like this:
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).
Solution 2
For TFS CI build, you can refer to these steps to achieve your requirement.
Note: There is –bail argument, which is required otherwise the step/task will be succeed even though webpack command throws exception.
Also, you can add variable in build definition (variable tab)
lohiarahul
I am a software developer who loves to write software to build great products and help businesses succeed with their goals. I appreciate good design and I am seeing it's importance more then ever in today's apps, web sites and products.
Updated on June 07, 2022Comments
-
lohiarahul almost 2 years
I am developing an Angular2 application in VS2015 and have a webpack bundling and minification environment set up for the same.
This is my 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'); }
I have also installed a webpack task runner which invokes this with the following commands
cmd /c SET NODE_ENV=development&& webpack -d --color
and
cmd /c SET NODE_ENV=production&& webpack -p --color
The setup seems to work fine. However, I want to integrate this with my TFS builds CI. The webpack command should fire after the project is built and report a build failure incase the webpack build fails. I have tried to incorporate the following code in my .csproj file
<Target Name="AfterBuild"> <Exec Condition="$(Configuration) == 'Debug'" Command="cmd /c SET NODE_ENV=production&& webpack -p --color"> </Exec> </Target>
It failed with an error 9009
After that I tried, starting the command up from the node_modules folder where webpack was installed
<Target Name="AfterBuild"> <Exec Condition="$(Configuration) == 'Debug'" Command="./node_modules/.bin cmd /c SET NODE_ENV=production&& webpack -p --color"> </Exec> </Target>
still in vain. Even if I get this to work, I am not sure if it would cause the VS build to fail if it encounters an error in webpack.
How do I go ahead with this?
-
Eamon Nerbonne over 7 yearsIsn't this going to be really slow? This implies you're running wepack on every C# build, and that might easily add 20s to your otherwise 1s build times.
-
Hemendra over 7 years@EamonNerbonne I agree, this will increase build time. Depending upon the situation one can have different combination of running webpack commands. For e.g. I make use of webpack --watch command while in debug mode and make use of above mentioned solution only in release mode i.e. Nightly builds. If you can think of any better solution please suggest :)
-
Eamon Nerbonne over 7 yearsThanks for the fast reply - I'll give it a shot, but I guess my chances aren't great...
-
Wollan over 6 yearsFyi: If anyone is getting 3x size of their bundle .js file then know it's the -d parameter causing this with Webpack 2 (it's causing source map files to be baked into it). github.com/webpack/webpack/issues/2445
-
Manfred over 4 yearsIn Visual Studio 2019 the following may work
<Target Name="PostBuild" AfterTargets="PostBuildEvent"> <Exec Condition="$(Configuration) == 'Debug'" Command="npm run buildDev" /> <Exec Condition="$(Configuration) == 'Release'" Command="npm run buildProd" /> </Target>