feat (images): image-webpack-loader => image-minimizer-webpack-plugin

Author: firestar300

config/loaders.js

@@ -21,27 +21,6 @@ module.exports = {
         type: 'asset/resource',
         exclude: /icons/,
         include: srcPath + '/img',
-        use: [
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              mozjpeg: {
-                progressive: true,
-                quality: 65,
-              },
-              pngquant: {
-                quality: [0.65, 0.9],
-                speed: 4,
-              },
-              gifsicle: {
-                interlaced: false,
-              },
-              webp: {
-                quality: 75,
-              },
-            },
-          },
-        ],
       },
       /* JSLoader */ {
         test: /\.js$/i,

config/webpack.common.js

@@ -1,6 +1,8 @@
 const path = require('path')
 const entries = require('./entries')
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
+const svgoconfig = require('./svgo.config')
 
 module.exports = {
   entry: entries,
@@ -12,6 +14,22 @@ module.exports = {
   },
   optimization: {
     minimizer: [
+      new ImageMinimizerPlugin({
+        minimizer: {
+          implementation: ImageMinimizerPlugin.imageminMinify,
+          options: {
+            // Lossless optimization with custom option
+            // Feel free to experiment with options for better result for you
+            plugins: [
+              ['gifsicle', { interlaced: true }],
+              ['jpegtran', { progressive: true }],
+              ['optipng', { optimizationLevel: 5 }],
+              // Svgo configuration here https://github.com/svg/svgo#configuratio
+              ['svgo', { svgoconfig }],
+            ],
+          },
+        },
+      }),
       new TerserPlugin({
         parallel: true,
         terserOptions: {

package.json

@@ -16,7 +16,6 @@
   "dependencies": {
     "lazysizes": "^5.3.2",
     "oneloop.js": "^5.0.0",
-    "sharp": "^0.32.0",
     "what-input": "^5.2.10"
   },
   "devDependencies": {
@@ -35,7 +34,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-webpack-plugin": "^3.2.0",
-    "image-webpack-loader": "^7.0.1",
+    "image-minimizer-webpack-plugin": "^3.8.2",
     "js-yaml": "^4.1.0",
     "json2csv": "^5.0.6",
     "mini-css-extract-plugin": "^1.5.0",
@@ -51,12 +50,14 @@
     "prettier": "^2.2.1",
     "sass": "^1.52.3",
     "sass-loader": "^11.0.1",
+    "sharp": "^0.32.1",
     "style-loader": "^2.0.0",
     "stylelint": "^14.13.0",
     "stylelint-config-recess-order": "^3.0.0",
     "stylelint-scss": "^4.3.0",
     "stylelint-webpack-plugin": "^3.3.0",
     "svg-sprite-loader": "^6.0.10",
+    "svgo": "^3.0.2",
     "svgo-loader": "^3.0.0",
     "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.35.0",