chore: replace image-webpack-loader (deprecated) with image-minimizer-webpack-plugin (#8498)

* chore: replace image-webpack-loader (deprecated) with image-minimizer-webpack-plugin

* chore: used sharp

* chore: remove got resolution

frontend/package.json

@@ -213,7 +213,9 @@
 		"eslint-plugin-simple-import-sort": "^7.0.0",
 		"eslint-plugin-sonarjs": "^0.12.0",
 		"husky": "^7.0.4",
-		"image-webpack-loader": "8.1.0",
+		"image-minimizer-webpack-plugin": "^4.0.0",
+		"imagemin": "^8.0.1",
+		"imagemin-svgo": "^10.0.1",
 		"is-ci": "^3.0.1",
 		"jest-styled-components": "^7.0.8",
 		"lint-staged": "^12.5.0",
@@ -230,6 +232,7 @@
 		"redux-mock-store": "1.5.4",
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
+		"sharp": "^0.33.4",
 		"ts-jest": "^27.1.5",
 		"ts-node": "^10.2.1",
 		"typescript-plugin-css-modules": "5.0.1",
@@ -254,7 +257,6 @@
 		"cross-spawn": "7.0.5",
 		"cookie": "^0.7.1",
 		"serialize-javascript": "6.0.2",
-		"prismjs": "1.30.0",
-		"got": "7.1.0"
+		"prismjs": "1.30.0"
 	}
 }

frontend/webpack.config.js

@@ -119,24 +119,8 @@ const config = {
 				],
 			},
 			{
-				test: /\.(png|jpe?g|gif|svg)$/i,
-				use: [
-					{
-						loader: 'file-loader',
-					},
-					{
-						loader: 'image-webpack-loader',
-						options: {
-							bypassOnDebug: true,
-							optipng: {
-								optimizationLevel: 7,
-							},
-							gifsicle: {
-								interlaced: false,
-							},
-						},
-					},
-				],
+				test: /\.(jpe?g|png|gif|svg)$/i,
+				type: 'asset',
 			},
 			{
 				test: /\.(ttf|eot|woff|woff2)$/,

frontend/webpack.config.prod.js

@@ -14,6 +14,7 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
 dotenv.config();
 
@@ -135,24 +136,8 @@ const config = {
 				],
 			},
 			{
-				test: /\.(png|jpe?g|gif|svg)$/i,
-				use: [
-					{
-						loader: 'file-loader',
-					},
-					{
-						loader: 'image-webpack-loader',
-						options: {
-							bypassOnDebug: true,
-							optipng: {
-								optimizationLevel: 7,
-							},
-							gifsicle: {
-								interlaced: false,
-							},
-						},
-					},
-				],
+				test: /\.(jpe?g|png|gif|svg)$/i,
+				type: 'asset',
 			},
 
 			{
@@ -212,6 +197,55 @@ const config = {
 				},
 			}),
 			new CssMinimizerPlugin(),
+			new ImageMinimizerPlugin({
+				minimizer: [
+					{
+						implementation: ImageMinimizerPlugin.sharpMinify,
+						options: {
+							encodeOptions: {
+								jpeg: {
+									quality: 80,
+								},
+								webp: {
+									lossless: true,
+								},
+								avif: {
+									lossless: true,
+								},
+								png: {},
+								gif: {},
+							},
+						},
+					},
+					{
+						implementation: ImageMinimizerPlugin.imageminMinify,
+						options: {
+							plugins: [
+								[
+									'svgo',
+									{
+										plugins: [
+											{
+												name: 'preset-default',
+												params: {
+													overrides: {
+														removeViewBox: false,
+														addAttributesToSVGElement: {
+															params: {
+																attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],
+															},
+														},
+													},
+												},
+											},
+										],
+									},
+								],
+							],
+						},
+					},
+				],
+			}),
 		],
 	},
 	performance: {