feat: Update to WADO Image Loader 4.0.3 to add dynamically imported WebAssembly codec support 🚀 (#2538)

* feat: update to prerelease of WADO Image Loader, add copy plugin to pull dist/dynamic-import into OHIF

* fix: Set empty public path

* perf: Add webpackPrefetch tags to lazy loaded components

* Switch to using webpack alias to use dynamic import version of WADO Image Loader

* fix lockfile

* prevent polyfilling zlib

* bump to wado image loader 4.0.3 with fix for public path

.webpack/rules/transpileJavaScript.js

@@ -21,7 +21,7 @@ function transpileJavaScript(mode) {
       : excludeNodeModulesExcept([]);
 
   return {
-    test: /\.jsx?$/,
+    test: /\.(mjs|js|jsx)?$/,
     // These are packages that are not transpiled to our lowest supported
     // JS version (currently ES5). Most of these leverage ES6+ features,
     // that we need to transpile to a different syntax.

.webpack/webpack.base.js

@@ -13,7 +13,7 @@ const cssToJavaScript = require('./rules/cssToJavaScript.js');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
   .BundleAnalyzerPlugin;
 const TerserJSPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 // ~~ ENV VARS
 const NODE_ENV = process.env.NODE_ENV;
@@ -39,9 +39,18 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
       app: `${SRC_DIR}/index.js`,
     },
     optimization: {
+      splitChunks: {
+        // include all types of chunks
+        chunks: 'all',
+      },
+      //runtimeChunk: 'single',
       minimize: isProdBuild,
       sideEffects: true,
     },
+    output: {
+      clean: true,
+      publicPath: '/',
+    },
     context: SRC_DIR,
     stats: {
       colors: true,
@@ -69,7 +78,7 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
       ],
     },
     resolve: {
-      mainFields: ['browser', 'module', 'main'],
+      mainFields: ['module', 'browser', 'main'],
       alias: {
         // Viewer project
         '@': path.resolve(__dirname, '../platform/viewer/src'),
@@ -80,6 +89,8 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
         '@hooks': path.resolve(__dirname, '../platform/viewer/src/hooks'),
         '@routes': path.resolve(__dirname, '../platform/viewer/src/routes'),
         '@state': path.resolve(__dirname, '../platform/viewer/src/state'),
+        'cornerstone-wado-image-loader':
+          'cornerstone-wado-image-loader/dist/dynamic-import/cornerstoneWADOImageLoader.min.js',
       },
       // Which directories to search when resolving modules
       modules: [
@@ -93,7 +104,7 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
       extensions: ['.js', '.jsx', '.json', '*'],
       // symlinked resources are resolved to their real path, not their symlinked location
       symlinks: true,
-      fallback: { fs: false, path: false },
+      fallback: { fs: false, path: false, zlib: false },
     },
     plugins: [
       new webpack.DefinePlugin({
@@ -120,6 +131,15 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
       }),
       // Uncomment to generate bundle analyzer
       // new BundleAnalyzerPlugin(),
+      new CopyPlugin({
+        patterns: [
+          {
+            from:
+              '../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import',
+            to: DIST_DIR,
+          },
+        ],
+      }),
     ],
   };
 
@@ -130,13 +150,6 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
         terserOptions: {},
       }),
     ];
-
-    /*config.plugins.push(
-      new MiniCssExtractPlugin({
-        filename: 'dist/[name].bundle.css',
-        chunkFilename: 'dist/[id].css',
-      })
-    );*/
   }
 
   if (isQuickBuild) {