MEAN Cookbook

How to do it...

Let's perform the following steps to add image resizing and compression to the blog post cover images loaded by our Angular application:

1. First, let's add simple image compression to our Angular application's webpack.prod.config.js WebPack configuration. We will simply import the imagemin-webpack-plugin module and append it to the end of our plugins configuration. We will set up a filter to only apply compression to .png and .jpg/.jpeg image files, as well as some configurations for the quality of compression we want to use:

...const ImageminPlugin = require('imagemin-webpack-plugin').default;...module.exports = {  ...  "plugins": [    ...    new ImageminPlugin({      "test": /\.(png|jpe?g)(\?.*)?$/,      "pngquant": {        "quality": "50"      } }) ...