Aurelia and webpack during dotnet publish in ASP.NET Core 2.0 and Visual Studio 2017

Question

The ASP.NET Core 2.0 project brings in Aurelia using

au new --here

I want to create the following artefacts when publishing the solution

\wwwroot\dist\app.bundle.js
\wwwroot\dist\vendor.bundle.js

I can achieve this by manually running

npx webpack --config webpack.netcore.config.js

But I would like to kickoff webpack builds when I publish:

dotnet publish -c Release

My ultimate aim is to have VSTS CI/CD process use MSBuild to automatically bundle the SPA files as required above.

Please note, during development I am already using hot module replacement via

using Microsoft.AspNetCore.SpaServices.Webpack;

And

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
    {
      HotModuleReplacement = true, 
      ConfigFile="webpack.netcore.config.js",
      HotModuleReplacementClientOptions = new Dictionary<string,string>{
        {"reload", "true"}
      }
    });
}

This works as expected. But now I need to achieve the same during publishing.

As a quick fix I've added a post-build event

  <Target Name="PostBuild" AfterTargets="PostBuildEvent">
    <Exec Command="npx webpack --config webpack.netcore.config.js" />
  </Target>

How do I get the custom MSBuild RunWebpack target explained here ?

Answer 1

So I also ran into the same issue. I noticed that in the webpack.config.js file it had the following lines:

output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
    sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
    chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
  },

But in the webpack.netcore.config.js file it had:

config.output.filename = '[name].bundle.js';

So when you publish it, it expects .net core to copy the app.bundle.js and vendor.bundle.js files but they aren't there, because webpack has it under a different file name due to caching purposes. So replace that line with the following:

config.output.filename = '[name].[chunkhash].bundle.js';