Here I'm going to post whatever that is interesting for me. All things about programming using JavaScript and ASP.NET Core. And something else.

A blog about ASP.Net Core and JavaScript

Tagged with Webpack 4

A few days ago I realized that stylesheet on one of my sites wasn't minified. The quick investigation showed that minify option of the webpack css-loader didn’t work anymore. I researched this problem and found that since version 1.0.0 the css-loader doesn't contain the minimize option (see changelog).

In this post, I will show how to keep your CSS minimized by using the PostCSS loader with cssnano.

I will use the Asp.Net Core project, configured as showed in one of my previous posts “Using webpack 4 with ASP.NET Core 2.x MVC application to process ES6 scripts and SASS styles” and will modify it in a proper way.

So, let’s do it.

A while ago webpack 4 has been released. And it is really fast. It is not fast as daylight, but it is quicker than Gulp or Grunt.

Despite this, when you try to find some examples how to use it to deal with ASP.NET Core 2.x, you'll fail. Ok! You will not. At least, you have found this post ;).  But most examples on the Internet use webpack 2.x.

This guide shows results of my researching and experiments while building a very minimalistic ASP.NET Core 2.1 application with Visual Studio 2017. Here I will use tools and pipelines that are conventional among the front-end developers:

  • NPM package manager to manage Node.js packages and to run scripts.
  • Javascript ES6-module syntax in the JavaScript code.
  • SASS to process styles.
  • webpack 4 to bundle all things together.

So, let's start.