Upgrade dependencies, replace img-loader with image-minimizer-webpack-plugin

package.json

@@ -39,20 +39,20 @@
     "eslint": "^7.10.0",
     "feather-icons": "^4.28.0",
     "file-loader": "^6.0.0",
-    "imagemin": "^7.0.0",
+    "image-minimizer-webpack-plugin": "^2.2.0",
     "imagemin-gifsicle": "^7.0.0",
     "imagemin-mozjpeg": "^9.0.0",
-    "imagemin-pngquant": "^9.0.0",
+    "imagemin-pngquant": "^9.0.2",
     "imagemin-svgo": "^9.0.0",
-    "img-loader": "^3.0.1",
+    "jest": "^27.0.4",
-    "jest": "^26.1.0",
     "maildev": "^1.1.0",
     "mini-css-extract-plugin": "^1.2.1",
     "nodemon": "^2.0.3",
     "sass": "^1.32.12",
-    "sass-loader": "^11.0.1",
+    "sass-loader": "^12.0.0",
+    "svgo": "^2.3.0",
     "terser-webpack-plugin": "^5.0.3",
-    "ts-jest": "^26.1.1",
+    "ts-jest": "^27.0.3",
     "ts-loader": "^9.1.0",
     "typescript": "^4.0.2",
     "webpack": "^5.3.2",

webpack.config.js

@@ -1,5 +1,7 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
+const { extendDefaultPlugins } = require("svgo");
 const TerserPlugin = require('terser-webpack-plugin');
 
 const dev = process.env.NODE_ENV === 'development';
@@ -62,19 +64,8 @@ const config = {
                 test: /\.(png|jpe?g|gif|svg)$/i,
                 use: [
                     'file-loader?name=../img/[name].[ext]',
-                    {
+                ],
-                        loader: 'img-loader',
+                type: 'asset',
-                        options: {
-                            enabled: !dev,
-                            plugins: [
-                                require('imagemin-gifsicle')({}),
-                                require('imagemin-mozjpeg')({}),
-                                require('imagemin-pngquant')({}),
-                                require('imagemin-svgo')({}),
-                            ]
-                        }
-                    }
-                ]
             }
         ],
     },
@@ -85,6 +76,35 @@ const config = {
         new MiniCssExtractPlugin({
             filename: '../css/[name].css',
         }),
+        new ImageMinimizerPlugin({
+            minimizerOptions: {
+                // Lossless optimization with custom option
+                // Feel free to experiment with options for better result for you
+                plugins: [
+                    ["gifsicle", {}],
+                    ["mozjpeg", {}],
+                    ["pngquant", {}],
+                    // Svgo configuration here https://github.com/svg/svgo#configuration
+                    [
+                        "svgo",
+                        {
+                            plugins: extendDefaultPlugins([
+                                {
+                                    name: "removeViewBox",
+                                    active: false,
+                                },
+                                {
+                                    name: "addAttributesToSVGElement",
+                                    params: {
+                                        attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
+                                    },
+                                },
+                            ]),
+                        },
+                    ],
+                ],
+            },
+        }),
     ]
 };
 
@@ -97,4 +117,4 @@ if (!dev) {
     };
 }
 
-module.exports = config;
+module.exports = config;