From 35cdc94e1a7c453e34b4eda7367013490fc685de Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Sun, 11 Jul 2021 12:02:34 +0200 Subject: [PATCH] Replace img-loader with image-minimizer-webpack-plugin --- package.json | 6 +- webpack.config.js | 46 +++++++++++----- yarn.lock | 137 +++++++++++++++++++++------------------------- 3 files changed, 99 insertions(+), 90 deletions(-) diff --git a/package.json b/package.json index 929ce0a..3931cfc 100644 --- a/package.json +++ b/package.json @@ -42,15 +42,15 @@ "electron-builder": "^22.11.5", "eslint": "^7.10.0", "file-loader": "^6.0.0", - "imagemin": "^8.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": "^4.0.0", "mini-css-extract-plugin": "^2.1.0", "sass": "^1.32.12", "sass-loader": "^12.1.0", + "svgo": "^2.3.1", "ts-loader": "^9.1.2", "typescript": "^4.0.2", "webpack": "^5.2.0", diff --git a/webpack.config.js b/webpack.config.js index aba8946..5b1d024 100644 --- a/webpack.config.js +++ b/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 CopyWebpackPlugin = require('copy-webpack-plugin'); const dev = process.env.NODE_ENV === 'development'; @@ -50,19 +52,8 @@ const config = { test: /\.(png|jpe?g|gif|svg)$/i, use: [ 'file-loader?name=../images/[name].[ext]', - { - loader: 'img-loader', - options: { - enabled: !dev, - plugins: [ - require('imagemin-gifsicle')({}), - require('imagemin-mozjpeg')({}), - require('imagemin-pngquant')({}), - require('imagemin-svgo')({}), - ] - } - } - ] + ], + type: 'asset', }, { test: /\.ts$/i, @@ -91,6 +82,35 @@ const config = { {from: 'node_modules/@fortawesome/fontawesome-free/svgs', to: '../images/icons'} ] }), + 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" }], + }, + }, + ]), + }, + ], + ], + }, + }), ] }; diff --git a/yarn.lock b/yarn.lock index 62100f0..ffbc4bf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1009,17 +1009,12 @@ dependencies: defer-to-connect "^1.0.1" -"@tokenizer/token@^0.1.1": - version "0.1.1" - resolved "https://registry.npmjs.org/@tokenizer/token/-/token-0.1.1.tgz#f0d92c12f87079ddfd1b29f614758b9696bc29e3" - integrity sha512-XO6INPbZCxdprl+9qa/AAbFFOMzzwqYxpjPgLICrMD6C2FCw6qfJOPcBk6JqqPLSaZ/Qx87qn4rpPmPMwaAK6w== - "@trysound/sax@0.1.1": version "0.1.1" resolved "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz#3348564048e7a2d7398c935d466c0414ebb6a669" integrity sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow== -"@types/debug@^4.1.5", "@types/debug@^4.1.6": +"@types/debug@^4.1.5": version "4.1.6" resolved "https://registry.npmjs.org/@types/debug/-/debug-4.1.6.tgz#0b7018723084918a865eff99249c490505df2163" integrity sha512-7fDOJFA/x8B+sO1901BmHlf5dE1cxBU8mRXj8QOEDnn16hhGJv/IHxJtZhvsabZsIMn0eLIyeOKAeqSNJJYTpA== @@ -2884,7 +2879,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== -fast-glob@^3.1.1, fast-glob@^3.2.5: +fast-glob@^3.0.3, fast-glob@^3.1.1, fast-glob@^3.2.5: version "3.2.7" resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1" integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q== @@ -2962,15 +2957,10 @@ file-type@^10.4.0: resolved "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz#2961d09e4675b9fb9a3ee6b69e9cd23f43fd1890" integrity sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw== -file-type@^14.6.0: - version "14.7.1" - resolved "https://registry.npmjs.org/file-type/-/file-type-14.7.1.tgz#f748732b3e70478bff530e1cf0ec2fe33608b1bb" - integrity sha512-sXAMgFk67fQLcetXustxfKX+PZgHIUFn96Xld9uH8aXPdX3xOp0/jg9OdouVTvQrf7mrn+wAa4jN/y9fUOOiRA== - dependencies: - readable-web-to-node-stream "^2.0.0" - strtok3 "^6.0.3" - token-types "^2.0.0" - typedarray-to-buffer "^3.1.5" +file-type@^12.0.0: + version "12.4.2" + resolved "https://registry.npmjs.org/file-type/-/file-type-12.4.2.tgz#a344ea5664a1d01447ee7fb1b635f72feb6169d9" + integrity sha512-UssQP5ZgIOKelfsaB5CuGAL+Y+q7EmONuiwF3N5HAH0t27rvrttgi6Ra9k/+DVaY9UF6+ybxu5pOXLUdA8N7Vg== file-type@^3.8.0: version "3.9.0" @@ -3279,6 +3269,20 @@ globalthis@^1.0.1: dependencies: define-properties "^1.1.3" +globby@^10.0.0: + version "10.0.2" + resolved "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz#277593e745acaa4646c3ab411289ec47a0392543" + integrity sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg== + dependencies: + "@types/glob" "^7.1.1" + array-union "^2.1.0" + dir-glob "^3.0.1" + fast-glob "^3.0.3" + glob "^7.1.3" + ignore "^5.1.1" + merge2 "^1.2.3" + slash "^3.0.0" + globby@^11.0.3: version "11.0.4" resolved "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5" @@ -3351,7 +3355,7 @@ got@^9.6.0: to-readable-stream "^1.0.0" url-parse-lax "^3.0.0" -graceful-fs@^4.1.10, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6: +graceful-fs@^4.1.10, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.4: version "4.2.6" resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee" integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ== @@ -3459,7 +3463,7 @@ icss-utils@^5.0.0, icss-utils@^5.1.0: resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae" integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== -ieee754@^1.1.13, ieee754@^1.2.1: +ieee754@^1.1.13: version "1.2.1" resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== @@ -3469,11 +3473,22 @@ ignore@^4.0.6: resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== -ignore@^5.1.4: +ignore@^5.1.1, ignore@^5.1.4: version "5.1.8" resolved "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57" integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw== +image-minimizer-webpack-plugin@^2.2.0: + version "2.2.0" + resolved "https://registry.npmjs.org/image-minimizer-webpack-plugin/-/image-minimizer-webpack-plugin-2.2.0.tgz#6d6d2d21424aa1b690d2e40a044bd9cd334e42ad" + integrity sha512-/BpKvjbfj9A+au7FryzHmj+1g3h2NzQ0w4nrXTU5YcQIGotvG69A5xyFL9Mq1htI9E8dI4rMF/wUc0klZLb1pg== + dependencies: + imagemin "^7.0.1" + klona "^2.0.4" + p-limit "^3.1.0" + schema-utils "^3.0.0" + serialize-javascript "^5.0.1" + imagemin-gifsicle@^7.0.0: version "7.0.0" resolved "https://registry.npmjs.org/imagemin-gifsicle/-/imagemin-gifsicle-7.0.0.tgz#1a7ab136a144c4678657ba3b6c412f80805d26b0" @@ -3492,7 +3507,7 @@ imagemin-mozjpeg@^9.0.0: is-jpg "^2.0.0" mozjpeg "^7.0.0" -imagemin-pngquant@^9.0.0: +imagemin-pngquant@^9.0.2: version "9.0.2" resolved "https://registry.npmjs.org/imagemin-pngquant/-/imagemin-pngquant-9.0.2.tgz#38155702b0cc4f60f671ba7c2b086ea3805d9567" integrity sha512-cj//bKo8+Frd/DM8l6Pg9pws1pnDUjgb7ae++sUX1kUVdv2nrngPykhiUOgFeE0LGY/LmUbCf4egCHC4YUcZSg== @@ -3511,24 +3526,18 @@ imagemin-svgo@^9.0.0: is-svg "^4.2.1" svgo "^2.1.0" -imagemin@^8.0.0: - version "8.0.0" - resolved "https://registry.npmjs.org/imagemin/-/imagemin-8.0.0.tgz#d707920d6c7a7f8b329d2e02d8c78d5dcc826356" - integrity sha512-z/SoCabSI9nYbCefdu1xgCJJ+KMjsu17dlaL7sGXAdaljIg7K32TUuj9Vt9jMjBZJd/qyWXJ+FvjChkvc2mXOw== +imagemin@^7.0.1: + version "7.0.1" + resolved "https://registry.npmjs.org/imagemin/-/imagemin-7.0.1.tgz#f6441ca647197632e23db7d971fffbd530c87dbf" + integrity sha512-33AmZ+xjZhg2JMCe+vDf6a9mzWukE7l+wAtesjE7KyteqqKjzxv7aVQeWnul1Ve26mWvEQqyPwl0OctNBfSR9w== dependencies: - file-type "^14.6.0" - globby "^11.0.3" - graceful-fs "^4.2.6" + file-type "^12.0.0" + globby "^10.0.0" + graceful-fs "^4.2.2" junk "^3.1.0" - p-pipe "^4.0.0" - replace-ext "^2.0.0" - -img-loader@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/img-loader/-/img-loader-4.0.0.tgz#f41fb0737cc8e1d6a8c242f48c29a443640e0638" - integrity sha512-UwRcPQdwdOyEHyCxe1V9s9YFwInwEWCpoO+kJGfIqDrBDqA8jZUsEZTxQ0JteNPGw/Gupmwesk2OhLTcnw6tnQ== - dependencies: - loader-utils "^1.1.0" + make-dir "^3.0.0" + p-pipe "^3.0.0" + replace-ext "^1.0.0" import-fresh@^3.0.0, import-fresh@^3.2.1: version "3.3.0" @@ -3980,7 +3989,7 @@ loader-runner@^4.2.0: resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384" integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw== -loader-utils@^1.1.0, loader-utils@^1.4.0: +loader-utils@^1.4.0: version "1.4.0" resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== @@ -4153,7 +4162,7 @@ merge-stream@^2.0.0: resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w== -merge2@^1.3.0: +merge2@^1.2.3, merge2@^1.3.0: version "1.4.1" resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae" integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg== @@ -4453,10 +4462,10 @@ p-map-series@^1.0.0: dependencies: p-reduce "^1.0.0" -p-pipe@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/p-pipe/-/p-pipe-4.0.0.tgz#7e5424569351b2ab452a47826acb93ce09ad6a2c" - integrity sha512-HkPfFklpZQPUKBFXzKFB6ihLriIHxnmuQdK9WmLDwe4hf2PdhhfWT/FJa+pc3bA1ywvKXtedxIRmd4Y7BTXE4w== +p-pipe@^3.0.0: + version "3.1.0" + resolved "https://registry.npmjs.org/p-pipe/-/p-pipe-3.1.0.tgz#48b57c922aa2e1af6a6404cb7c6bf0eb9cc8e60e" + integrity sha512-08pj8ATpzMR0Y80x50yJHn37NF6vjrqHutASaX5LiH5npS9XPvrUmscd9MF5R4fuYRHOxQR1FfMIlF7AzwoPqw== p-reduce@^1.0.0: version "1.0.0" @@ -4562,11 +4571,6 @@ path-type@^4.0.0: resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -peek-readable@^3.1.3: - version "3.1.3" - resolved "https://registry.npmjs.org/peek-readable/-/peek-readable-3.1.3.tgz#932480d46cf6aa553c46c68566c4fb69a82cd2b1" - integrity sha512-mpAcysyRJxmICBcBa5IXH7SZPvWkcghm6Fk8RekoS3v+BpbSzlZzuWbMx+GXrlUwESi9qHar4nVEZNMKylIHvg== - pend@~1.2.0: version "1.2.0" resolved "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50" @@ -4817,11 +4821,6 @@ readable-stream@^2.0.0, readable-stream@^2.2.2, readable-stream@^2.3.0, readable string_decoder "~1.1.1" util-deprecate "~1.0.1" -readable-web-to-node-stream@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/readable-web-to-node-stream/-/readable-web-to-node-stream-2.0.0.tgz#751e632f466552ac0d5c440cc01470352f93c4b7" - integrity sha512-+oZJurc4hXpaaqsN68GoZGQAQIA3qr09Or4fqEsargABnbe5Aau8hFn6ISVleT3cpY/0n/8drn7huyyEvTbghA== - readdirp@~3.6.0: version "3.6.0" resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" @@ -4918,10 +4917,10 @@ repeating@^2.0.0: dependencies: is-finite "^1.0.0" -replace-ext@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz#9471c213d22e1bcc26717cd6e50881d88f812b06" - integrity sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug== +replace-ext@^1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz#2d6d996d04a15855d967443631dd5f77825b016a" + integrity sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw== require-directory@^2.1.1: version "2.1.1" @@ -5128,6 +5127,13 @@ serialize-error@^7.0.1: dependencies: type-fest "^0.13.1" +serialize-javascript@^5.0.1: + version "5.0.1" + resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4" + integrity sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA== + dependencies: + randombytes "^2.1.0" + serialize-javascript@^6.0.0: version "6.0.0" resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8" @@ -5432,15 +5438,6 @@ strip-outer@^1.0.0: dependencies: escape-string-regexp "^1.0.2" -strtok3@^6.0.3: - version "6.1.1" - resolved "https://registry.npmjs.org/strtok3/-/strtok3-6.1.1.tgz#4e948b5bffeee4c66504c73625a28b170d45ae45" - integrity sha512-Q2YbTf17/GPyhWnYGPcxZdPuXvVvstHEKdgxgdaj+SI2c5//KezIgAQJAT2/RYI0H+CQt2fDVvPiLBdl82i0yA== - dependencies: - "@tokenizer/token" "^0.1.1" - "@types/debug" "^4.1.6" - peek-readable "^3.1.3" - sumchecker@^3.0.1: version "3.0.1" resolved "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42" @@ -5474,7 +5471,7 @@ supports-color@^8.0.0, supports-color@^8.1.0: dependencies: has-flag "^4.0.0" -svgo@^2.1.0: +svgo@^2.1.0, svgo@^2.3.1: version "2.3.1" resolved "https://registry.npmjs.org/svgo/-/svgo-2.3.1.tgz#603a69ce50311c0e36791528f549644ec1b3f4bc" integrity sha512-riDDIQgXpEnn0BEl9Gvhh1LNLIyiusSpt64IR8upJu7MwxnzetmF/Y57pXQD2NMX2lVyMRzXt5f2M5rO4wG7Dw== @@ -5610,14 +5607,6 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" -token-types@^2.0.0: - version "2.1.1" - resolved "https://registry.npmjs.org/token-types/-/token-types-2.1.1.tgz#bd585d64902aaf720b8979d257b4b850b4d45c45" - integrity sha512-wnQcqlreS6VjthyHO3Y/kpK/emflxDBNhlNUPfh7wE39KnuDdOituXomIbyI79vBtF0Ninpkh72mcuRHo+RG3Q== - dependencies: - "@tokenizer/token" "^0.1.1" - ieee754 "^1.2.1" - tree-kill@^1.2.2: version "1.2.2" resolved "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"