chore(webpack): Use v5 asset modules over loaders

Documentation/config.js

@@ -67,7 +67,7 @@ module.exports = {
       },
       {
         test: /\\.svg$/,
-        use: [{ loader: 'raw-loader' }],
+        type: 'asset/source',
       },
       {
         test: /\\.worker\\.js$/,
@@ -78,7 +78,7 @@ module.exports = {
           },
         ],
       },
-      { test: /\\.(png|jpg)$/, use: 'url-loader?limit=81920' },
+      { test: /\\.(png|jpg)$/, type: 'asset' },
       { test: /\\.html$/, loader: 'html-loader' },
       { test: /\\.cjson$/, loader: 'hson-loader' },
       { test: /\\.hson$/, loader: 'hson-loader' },

Documentation/content/docs/develop_build.md

@@ -7,7 +7,7 @@ The library can be built with webpack automatically. Webpack can either gather a
 
 ## Building vtk.js
 
-In order to build the library you can run `npm run build` for quick development usage or `npm run build:release` for production usage.
+In order to build the library you can run `npm run dev` for quick development usage or `npm run build` for production usage.
 
 Either of these commands will generate a `dist/vtk.js` file that can then be used as an external script.
 

Documentation/content/docs/intro_vtk_as_es6_dependency.md

@@ -3,6 +3,10 @@ title: Using vtk.js as an ES6 dependency
 
 This guide illustrates how to consume vtk.js as an ES dependency.
 
+This document was last updated with the following package versions:
+- `@kitware/vtk.js@v19`
+- `webpack@v5`
+
 ## Starting a new vtk.js project
 
 There are several ways to start a new vtk.js project. Below lists a few ways you can begin using vtk.js with your favorite project build tool.
@@ -111,8 +115,8 @@ var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rule
   module: {
     rules: [
         { test: /\.html$/, loader: 'html-loader' },
-        { test: /\.(png|jpg)$/, use: 'url-loader?limit=81920' },
-        { test: /\.svg$/, use: [{ loader: 'raw-loader' }] },
+        { test: /\.(png|jpg)$/, type: 'asset' },
+        { test: /\.svg$/, type: 'asset/source' },
     ].concat(vtkRules, cssRules),
   },
 
@@ -121,4 +125,4 @@ var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rule
 
 Another possible issue is the fact that some relative import can not be resolved. In which case, you should copy those files to your local `./src/` directory and fix the actual import path.
 
-And if you didn't skip any piece you should be allset and ready to run that new code base.
+And if you didn't skip any piece you should be all set and ready to run that new code base.

README.md

@@ -48,7 +48,7 @@ In general VTK tries to be as portable as possible; the specific configurations
 
 vtk.js supports the following development environments:
 
-- Node 10+
+- Node 12+
 - NPM 6+
 
 and we use [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env) with the [defaults](https://github.com/Kitware/vtk-js/blob/master/.browserslistrc) set of [browsers target](https://browserl.ist/?q=defaults).

Utilities/config/rules-examples.js

@@ -1,5 +1,5 @@
 module.exports = [
-  { test: /\.(png|jpg)$/, use: 'url-loader?limit=81920' },
+  { test: /\.(png|jpg)$/, type: 'asset' },
   { test: /\.html$/, loader: 'html-loader' },
   { test: /\.cjson$/, loader: 'hson-loader' },
   { test: /\.hson$/, loader: 'hson-loader' },

Utilities/config/rules-tests.js

@@ -1,7 +1,14 @@
 module.exports = [
-  { test: /canvas.node/, loader: 'ignore-loader' },
   { test: /\.cjson$/, loader: 'hson-loader' },
-  { test: /test[^\.]*\.(png|jpg)$/, use: 'url-loader?limit=1048576' },
+  {
+    test: /test[^\.]*\.(png|jpg)$/,
+    type: 'asset',
+    parser: {
+      dataUrlCondition: {
+        maxSize: 1024 * 1024,
+      },
+    },
+  },
   { test: /\.glsl$/i, loader: 'shader-loader' },
   {
     test: /\.worker\.js$/,

Utilities/config/rules-vtk.js

@@ -48,7 +48,7 @@ module.exports = [
   },
   {
     test: /\.svg$/,
-    use: [{ loader: 'raw-loader' }],
+    type: 'asset/source',
   },
   {
     test: /\.worker\.js$/,

package.json

@@ -100,7 +100,6 @@
     "postcss-loader": "6.1.1",
     "prettier": "2.4.0",
     "process": "0.11.10",
-    "raw-loader": "4.0.2",
     "rollup": "2.56.3",
     "rollup-plugin-ignore": "1.0.10",
     "rollup-plugin-polyfill-node": "0.7.0",
@@ -116,7 +115,6 @@
     "tap-spec": "5.0.0",
     "tape": "5.3.1",
     "tape-catch": "1.0.6",
-    "url-loader": "4.1.1",
     "webpack": "5.52.1",
     "webpack-bundle-analyzer": "4.4.2",
     "webpack-cli": "4.8.0",

webpack.common.js

@@ -67,7 +67,7 @@ function configureVtkRules() {
     },
     {
       test: /\.svg$/,
-      use: [{ loader: 'raw-loader' }],
+      type: 'asset/source',
     },
     {
       test: /\.worker\.js$/,