Using webpack in Visual Studio's pre-build

Question

I have two commands:

npm run build - calls webpack to compile all my .js

npm run dev - calls webpack -w, compiles all my .js and stays in watch mode, looking for changes.

I want to integrate it with Visual Studio's build, so I went into Properties -> Build Events -> Pre-build

if $(ConfigurationName) == Debug (
  npm --prefix ../ run dev
) ELSE (
  npm --prefix ../ run build
)

This logic works. If I'm at release mode, it will simple bundle my files and the server will run. But the problem is at debug mode, since the webpack -w doesn't end, the build also never ends, it's expecting an exit code....

So I tried to outsmart Visual Studio and start a new cmd process that would not block the build's start:

start cmd /K npm --prefix ../ run dev

Unfortunately, Visual Studio is too smart for me.

So the question is: is there any smart way to make the visual studio simply run what I want in the pre-build command and not wait for it to finish?

I know there's a proper place for this called task runner, but I couldn't configure it properly, it doesn't recognize any commands from my package.json. Also, I don't want to active it manually after/before running my server, ideally I want it to be integrated with the server startup so that's why I went for the pre-build. But if there's a smarter way to do this, feel free to point it to me.

Thanks in advance.

Answer 1

I have recently had a similar situation where I want to run Webpack in watch mode after building my project in debug mode. I was running into the same issue where the prebuild step would hang indefinitely when I ran my project.

I came up with the following solution which runs the .bat file by opening a separate cmd window which doesn't stop the build from completing and works like a charm.

Step 1 - Create a .bat file in the root of the project, I have called this WebpackWatch.bat with the following code, this will run webpack and put it into watch mode in the opened cmd window

webpack --progress --profile --watch --mode development

Step 2 - In the post build event, I have added the following, this will run the powershell command to open the .bat file, and then continue on with the build, for release mode, it calls the script build:prod in my packages config

if $(ConfigurationName) == Debug powershell start-process $(ProjectDir)WebpackWatch.bat
if $(ConfigurationName) == Release npm run build:prod

For information purposes my package.json file has the following script for the release build event, notice this does not have --watch in the build process so this completes file with the build step.

 "scripts": {
    "build:prod": "webpack --progress --profile --mode production"
  },