Developments in Digital
Developments in Digital

Using Webpack with ASP.NET Core

If you wish to ease the development of client code built with Webpack whilst connecting to an ASP.NET Core API, you can take advantage of the Webpack dev middleware included in .NET Core 2.1.

There isn't much documentation currently available, but the following setup does work with Webpack 4:

Install the necessary npm packages:

yarn add -D aspnet-webpack webpack-hot-middleware
yarn add -D aspnet-webpack-react react-hot-loader

Note that aspnet-webpack-react and react-hot-loader are only required if you're using React and wish to enable React Hot Module Replacement (HMR).

Configure the Webpack dev middleware:

First, you need to add the NodeServices services:

services.AddNodeServices();

Then configure the middleware in development only, for production you will likely just configure Webpack to output to your wwwroot folder, and configure static file hosting:

private void ConfigureFileHosting(IApplicationBuilder app)
{
    // Use webpack dev middleware during development
    if (this.environment.IsDevelopment())
    {
        // Get absolute path to client code, where `webpack.config.js` resides
        var projectPath = Path.GetFullPath(@"..\xxx", this.environment.WebRootPath);
        var options = new WebpackDevMiddlewareOptions
        {
            ProjectPath = projectPath,
            HotModuleReplacement = true,
            ReactHotModuleReplacement = true, // if using React            
            EnvironmentVariables = // configure any environment vars
        };

        app.UseWebpackDevMiddleware(options);
        return;
    }

    // For production, host index.html in wwwroot
    app.UseDefaultFiles(new DefaultFilesOptions
    {
        DefaultFileNames = new List<string> { "index.html" },
    });

    app.UseStaticFiles();
}

By default, the Webpack dev middleware does not send the Webpack 4 mode setting, and you'll receive the warning:

The 'mode' option has not been set, webpack will fallback to 'production' for this value. 
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

To get around this, you will need to specify the mode directly in your webpack.config.js file, which you can base off of the NODE_ENV setting, for example:

const isDevelopment = process.env.NODE_ENV !== 'production'

const config = {
  mode: isDevelopment ? 'development' : 'production',
  ...
}