MSBuild: Conditionally run webpack only when there's changes - visual-studio

Question

We're using Visual Studio 2019 and have successfully configured MSBuild tasks to run webpack for us - both in Debug and Production mode.
But it is a bit overkill to run everytime the project builds e.g. when we run unit tests and there is no changes to the Web project, we don't need webpack to execute.
Is there a way to configure the build task to only execute when files in a particular folder have changed?
Here is our current configuration:
<Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug'">
<!-- Ensure Node.js is installed -->
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
<!-- In development, the dist files won't exist on the first run or when cloning to
a different machine, so rebuild them if not already present. -->
<Message Importance="high" Text="Performing first-run Webpack build..." />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" />
<Exec Command="node node_modules/webpack/bin/webpack.js" />
</Target>
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec Command="npm install" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="wwwroot\dist\**" />
<ResolvedFileToPublish Include="#(DistFiles->'%(FullPath)')" Exclude="#(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</ResolvedFileToPublish>
</ItemGroup>
</Target>

Answer 1

Is there a way to configure the build task to only execute when files
in a particular folder have changed?
You can differentiate the publish and build process by the DeployOnBuild Property.
Solution
You only need to add a condition to DebugRunWebpack target:
<Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' and 'DeployOnBuild'=='true'">
<!-- Ensure Node.js is installed -->
......
</Target>
And it will only execute the target during publish process.
In addition, PublishRunWebpack target runs after ComputeFilesToPublish which belongs to Publish process. So you do not worry about it.
Update 1
To detect whether these files changed, you can try this condition:
<Target Name="xxxx" Condition="$([System.DateTime]::Parse('%(ModifiedTime)').Ticks) > $([System.IO.File]::GetLastWriteTime('$(xxxxxxxx)%(RecursiveDir)%(Filename)%(Extension)').Ticks)" />
Note $(xxxxxxxx)%(RecursiveDir)%(Filename)%(Extension) means all the files in such folder
Besides, you can refer to this document.
Hope it could help you.