Release 5.1.0

Image optimisation plugins based on `imagemin`.

Author: pnikolov

CHANGELOG.md

@@ -1,5 +1,49 @@
 # Change log
 
+## [5.1.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v5.1.0)
+### 01/12/2020
+
+### New Features
+
+* Image optimisation is now done using [`image-minimizer-webpack-plugin`](https://github.com/webpack-contrib/image-minimizer-webpack-plugin)
+  * We have **removed** te usage of the [`imagemin-webpack-plugin`](https://github.com/Klathmon/imagemin-webpack-plugin)
+
+### Updates
+
+* Updated `webpack.config.js` to configure the new image optimisation plugin.
+* Updated *README* file with more clear features description and language style fixes.
+
+### Added New Packages
+
+* [`image-minimizer-webpack-plugin@1.0.0`](https://github.com/webpack-contrib/image-minimizer-webpack-plugin) - Plugin and Loader for webpack to optimize (compress) all images using imagemin. Do not worry about size of images, now they are always optimized/compressed.
+* [`imagemin`](https://github.com/imagemin/imagemin) image optimisation packages for *loseless* image optimisation:
+  * [`imagemin-jpegtran@7.0.0`](https://www.npmjs.com/package/imagemin-jpegtran/v/7.0.0) - for optimizing *JPG* images
+  * [`imagemin-optipng@8.0.0`](https://www.npmjs.com/package/imagemin-optipng) - for optimizing *PNG* images
+  * [`imagemin-gifsicle@7.0.0`](https://www.npmjs.com/package/imagemin-gifsicle) - for optimizing *GIF* images
+  * [`imagemin-svgo@8.0.0`](https://www.npmjs.com/package/imagemin-svgo) - for optimizing *SVG* images
+
+### Removed Packags
+
+* [`imagemin-webpack-plugin`](https://github.com/Klathmon/imagemin-webpack-plugin)
+
+### Package Version Updates
+
+* `autoprefixer@10.0.4` change log can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/10.0.4).
+* `@babel/core@7.12.9` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.12.9).
+* `@babel/preset-env@7.12.7` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.12.9).
+* `copy-webpack-plugin@6.3.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v6.3.0).
+* `css-loader@5.0.1` change log can be found on the official [release notes](https://github.com/webpack-contrib/postcss-loader/releases/tag/v5.0.1).
+* `eslint-config-airbnb@18.2.1` change log can be found on the official [release notes](https://github.com/airbnb/javascript/releases/tag/eslint-config-airbnb-v18.2.1). 
+* `eslint@7.14.0` change log can be found on the official [release notes](https://github.com/eslint/eslint/releases/tag/v7.14.0).
+* `mini-css-extract-plugin@1.3.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v1.3.0).
+* `postcss@8.1.6` change log can be found on the official [release notes](https://github.com/postcss/postcss/releases/tag/8.1.6).
+* `postcss-loader@4.1.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/postcss-loader/releases/tag/v4.1.0).
+* `sass@1.29.0` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.29.0).
+* `sass-loader@10.1.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v10.1.0).
+* `webpack@5.9.0` change log can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v5.9.0).
+* `webpack-cli@4.2.0` change log can be found on the official [release notes](https://github.com/webpack/webpack-cli/releases/tag/v4.2.0).
+* `webpack-merge@5.4.0` change log can be found on the official [change log](https://github.com/survivejs/webpack-merge/blob/master/CHANGELOG.md).
+
 ## [5.0.1](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v5.0.1)
 ### 28/10/2020
 
@@ -72,7 +116,7 @@
 
 ### Packages Minor Version Updates
 
-* `@babel/core@7.12.1` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.12.0).
+* `@babel/core@7.12.1` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.12.1).
 * `@babel/preset-env@7.12.1` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.12.1).
 * `ajv@6.12.6` change log can be found on the official [release notes](https://github.com/epoberezkin/ajv/releases/tag/v6.12.6).
 * `copy-webpack-plugin@6.2.1` change log can be found on the official [release notes](https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v6.2.1).
@@ -83,7 +127,7 @@
 * `file-loader@6.1.1` change log can be found on the official [release notes](https://github.com/webpack-contrib/file-loader/releases/tag/v6.1.1).
 * `postcss@8.1.4` change log can be found on the official [release notes](https://github.com/postcss/postcss/releases/tag/8.1.4).
 * `postcss-loader@4.0.4` change log can be found on the official [release notes](https://github.com/webpack-contrib/postcss-loader/releases/tag/v4.0.4).
-* `sass@1.27.0` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.27.0)
+* `sass@1.27.0` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.27.0).
 * `sass-loader@10.0.4` change log can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v10.0.4).
 * `url-loader@4.1.1` change log can be found on the official [release notes](https://github.com/webpack-contrib/url-loader/releases/tag/v4.1.1).
 
@@ -102,7 +146,7 @@
 
 ### Packages Major Version Updates
 
-* `autoprefixer@10.0.0` from `9.x` new features and braking changes can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/9.8.6).
+* `autoprefixer@10.0.0` from `9.x` new features and braking changes can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/10.0.0).
 * `postcss-loader@4.0.2` from `3.x` new features and braking changes can be found on the official [release notes](https://github.com/webpack-contrib/postcss-loader/releases/tag/v4.0.0).
 * `sass-loader@10.0.2` from `9.x` new features and braking changes can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v9.0.3).
 
@@ -212,8 +256,8 @@
 * `eslint-config-airbnb@18.2.0` change log can be found on the official [release notes](https://github.com/airbnb/javascript/releases/tag/eslint-config-airbnb-v18.2.0). 
 * `eslint-plugin-jsx-a11y@6.3.1` change log can be found on the official [release notes](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/releases/tag/v6.3.1)
 * `eslint-plugin-import@2.21.2` change log can be found on the official [release notes](https://github.com/benmosher/eslint-plugin-import/releases/tag/v2.21.2).
-* `sass@1.26.9` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.26.9)
-* `webpack-cli@3.3.12` change log can be found on the official [release notes](https://github.com/webpack/webpack-cli/releases/tag/v3.3.12)
+* `sass@1.26.9` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.26.9).
+* `webpack-cli@3.3.12` change log can be found on the official [release notes](https://github.com/webpack/webpack-cli/releases/tag/v3.3.12).
 
 ## [4.2.6](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v4.2.6)
 ### 03/06/2020

README.md

@@ -1,7 +1,7 @@
 # Webpack 5 Boilerplate
 
 ![Maintenance](https://img.shields.io/maintenance/yes/2020?logo=github)
-![webpack-current](https://img.shields.io/badge/webpack-v5.3.1-green?logo=webpack)
+![webpack-current](https://img.shields.io/badge/webpack-v5.9.0-green?logo=webpack)
 ![node-current (scoped)](https://img.shields.io/node/v/@weareathlon/frontend-webpack-boilerplate)
 [![Build Status](https://api.travis-ci.org/weareathlon/frontend-webpack-boilerplate.svg?branch=master)](https://travis-ci.org/weareathlon/frontend-webpack-boilerplate)
 [![GitHub Issues](https://img.shields.io/github/issues-raw/WeAreAthlon/frontend-webpack-boilerplate)](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/issues)
@@ -27,27 +27,28 @@
     "> 5%"
 ]
 ```
-* The build CSS / JavaScript files will respect the configured supported browsers using the following tools:
+* The built CSS / JavaScript files will respect the **configured supported browsers** using the following tools:
   * [`autoprefixer`](https://github.com/postcss/autoprefixer) - automatically adds vendor prefixes to CSS rules
-  * [`babel-preset-env`](https://babeljs.io/docs/en/babel-preset-env) - smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s)
-* Demo project for reference and **demo example** building of:
+  * [`babel-preset-env`](https://babeljs.io/docs/en/babel-preset-env) - smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (*and optionally, browser polyfills*) are needed by your target environment(s).
+* Demo project files to be used as a reference and **demo example** building of:
   * *JavaScript*
   * *SASS / PostCSS*
   * *HTML* templates
-  * *Images*
+  * *Images* (*CSS backgrounds and image tags*)
   * *Fonts*
-* Support for **assets optimization** for production:
-  * **Minification** of *JavaScript* and *CSS* files.
-  * **Inline** **images** / **fonts** files having file size below a *configurable* threshold value.
-* Configured Code style and formatting **linters** that analyze source code to flag programming errors, bugs, stylistic errors, and suspicious constructs:
-  * **SASS/PostCSS** - you can change or add additional rules in `.sasslintrc` file. Configuration options can be found on [`sass-lint`](https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml) documentation.
-  * **JavaScript** - following the `airbnb` style, you can review and configure the rules in `.eslintrc` file. Configuration options can be found on [`eslint`](https://eslint.org/docs/user-guide/configuring) documentation.
+* Support for **assets optimization** for production environment with ability to configure:
+  * **Code Minification** of *JavaScript* and *CSS* processed files.
+  * **Optimize Assets Loading** - inline and embed **images** / **fonts** files having file size below a *configurable* threshold value.
+  * **Images Optimisation** - optimize `jpeg`, `jpg`, `png`, `gif`, `svg` filesize and loading type via [`imagemin`](https://github.com/imagemin/imagemin). Plugin and Loader for webpack to optimize (*compress*) all images using `imagemin`. Do not worry about size of images, now they are always optimized/compressed.
+* Support for **source code syntax style and formatting linters** that analyze source code to flag programming errors, bugs, stylistic errors, and suspicious constructs:
+  * **SASS/PostCSS syntax cheker** - you can change or add additional rules in `.sasslintrc` file. Configuration options can be found on [`sass-lint`](https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml) documentation.
+  * **JavaScript syntax checker** - following the `airbnb` style, you can review and configure the rules in `.eslintrc` file. Configuration options can be found on [`eslint`](https://eslint.org/docs/user-guide/configuring) documentation.
 * Latest [Webpack 5](https://github.com/webpack/webpack) - *JavaScript* module bundler.
 * Latest [SASS/PostCSS](https://github.com/sass/sass) compiler based on Dart `sass`.
 * Latest [Babel 7](https://github.com/babel/babel) (`@babel/core`) - JavaScript compiler - _Use next generation JavaScript, today._
 * Integration with [Travis CI](https://travis-ci.org/)
   * [Demo deployment available to GitHub pages](https://weareathlon.github.io/frontend-webpack-boilerplate/)
-* Configured and ready to use **Webpack Dev Server** plugin - [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/)
+* Configured and ready to use **Webpack Dev Server** plugin for faster local development - [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/)
 
 ## Requirements
 
@@ -58,9 +59,9 @@
 
 ## Installation
 
-1. Choose and download the template from [List of Releases](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases).
+1. Choose and download the latest template release from [List of Releases](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases).
 2. Extract the release archive to a new directory, rename it to your project name and browse the directory.
-3. Install all dependencies using `npm` clean install. 
+3. Install all dependencies using `npm` *clean install* command. 
 
 ```sh 
 $ npm ci
@@ -97,7 +98,7 @@ $ npm ci
 You can additionally configure `webpack` for specific environment:
 * `development` - [`configuration/webpack.dev.config.js`](configuration/webpack.dev.config.js)
 * `production` - [`configuration/webpack.prod.config.js`](configuration/webpack.prod.config.js)
-** Note that if you prefer to build and deploy [`sourcemap`](https://webpack.js.org/configuration/devtool/#production) files:
+  * Note that if you prefer to build and deploy [`sourcemap`](https://webpack.js.org/configuration/devtool/#production) files:
 > You should configure your server to disallow access to the Source Map file for normal users!
 
 ## Development
@@ -109,7 +110,7 @@ You can additionally configure `webpack` for specific environment:
 * **Image** files are located under `src/images/`
 * **Font** files are located under `src/fonts/`
 * **HTML** files are located under `src/templates/`
-  * It will **automatically** build **all files** placed under `src/templates/` directory, no need to manually configure each template anymore!
+  * It will **automatically** build **all HTML files** placed under `src/templates/` directory, no need to manually configure each template anymore!
 
 ## Build Assets
 
@@ -127,7 +128,7 @@ $ npm run watch
 
 This command is suitable if you develop with external web server.
 
-*Note:* Watching does not work with *NFS* (*Windows*) and machines in *VirtualBox*. 
+**Note:** File watching does not work with *NFS* (*Windows*) and machines in *VirtualBox*. 
 Extend the configuration in such cases by:
 
 ```js