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.
There are a lot of tutorials, which describe how to perform canvas elements transformations. For example, there is a cool article in the MDN web docs.
But when I tried to create a common function to manipulate the canvas objects, it took a couple of hours to understand how to perform transformations correctly for every canvas object.
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.
- SASS to process styles.
- webpack 4 to bundle all things together.
So, let's start.