update webpack and svgo dependencies (#58)

* update webpack and svgo dependencies

This updates to svgo 3. Because `optimize` now throws instead of
returning an error result, error handling has been removed.

This also removes support for Webpack 4. This allows to use
`this.getOptions()` instead of `loader-utils`. Also the Webpack
configuration files have been updated for Webpack 5.

As of npm 9 the default lockfile format version is 3. This is now
explicitly specified in .npmrc for compatibility between npm 8 and 9.

* update readme for Webpack 5

.npmrc

@@ -0,0 +1 @@
+lockfile-version = 3

README.md

@@ -23,14 +23,8 @@ module.exports = {
     rules: [
       {
         test: /\.svg$/,
-        use: [
-          {
-            loader: 'file-loader'
-          },
-          {
-            loader: 'svgo-loader',
-          }
-        ]
+        type: 'asset',
+        loader: 'svgo-loader'
       }
     ]
   }
@@ -49,17 +43,11 @@ module.exports = {
     rules: [
       {
         test: /\.svg$/,
-        use: [
-          {
-            loader: 'file-loader'
-          },
-          {
-            loader: 'svgo-loader',
-            options: {
-              configFile: './scripts/svgo.config.js'
-            }
-          }
-        ]
+        type: 'asset',
+        loader: 'svgo-loader',
+        options: {
+          configFile: './scripts/svgo.config.js'
+        }
       }
     ]
   }
@@ -75,17 +63,11 @@ module.exports = {
     rules: [
       {
         test: /\.svg$/,
-        use: [
-          {
-            loader: 'file-loader'
-          },
-          {
-            loader: 'svgo-loader',
-            options: {
-              configFile: false
-            }
-          }
-        ]
+        type: 'asset',
+        loader: 'svgo-loader',
+        options: {
+          configFile: false
+        }
       }
     ]
   }
@@ -101,21 +83,15 @@ module.exports = {
     rules: [
       {
         test: /\.svg$/,
-        use: [
-          {
-            loader: 'file-loader'
-          },
-          {
-            loader: 'svgo-loader',
-            options: {
-              multipass: true,
-              js2svg: {
-                indent: 2,
-                pretty: true,
-              }
-            }
+        type: 'asset',
+        loader: 'svgo-loader',
+        options: {
+          multipass: true,
+          js2svg: {
+            indent: 2,
+            pretty: true,
           }
-        ]
+        }
       }
     ]
   }

example/basic/webpack.config.js

@@ -10,14 +10,8 @@ module.exports = {
     rules: [
       {
         test: /\.svg$/,
-        use: [
-          {
-            loader: 'file-loader'
-          },
-          {
-            loader: '../../index.js',
-          }
-        ]
+        type: 'asset/resource',
+        loader: '../../index.js',
       }
     ]
   }

example/external-config/webpack.config.js

@@ -10,17 +10,11 @@ module.exports = {
     rules: [
       {
         test: /\.svg$/,
-        use: [
-          {
-            loader: "file-loader"
-          },
-          {
-            loader: "../../index.js",
-            options: {
-              configFile: './svgo.config.js'
-            }
-          }
-        ]
+        type: "asset/resource",
+        loader: "../../index.js",
+        options: {
+          configFile: './svgo.config.js'
+        }
       }
     ]
   }

example/svgo-error/webpack.config.js

@@ -10,14 +10,8 @@ module.exports = {
     rules: [
       {
         test: /\.svg$/,
-        use: [
-          {
-            loader: 'file-loader'
-          },
-          {
-            loader: '../../index.js',
-          }
-        ]
+        type: 'asset/resource',
+        loader: '../../index.js'
       }
     ]
   }

index.js

@@ -1,18 +1,14 @@
 const { optimize, loadConfig } = require('svgo');
-const loaderUtils = require('loader-utils');
 
 async function loader(source) {
-  const { configFile, ...options } = loaderUtils.getOptions(this) || {};
+  const { configFile, ...options } = this.getOptions();
   let config;
   if (typeof configFile === 'string') {
     config = await loadConfig(configFile, this.context);
   } else if (configFile !== false) {
     config = await loadConfig(null, this.context);
   }
   const result = optimize(source, { path: this.resourcePath, ...config, ...options });
-  if (result.error) {
-    throw Error(result.error);
-  }
   return result.data;
 }