Switch from webpack to rspack for bundling

builder/metadata_schema.json

@@ -92,8 +92,8 @@
       "default": "static"
     },
     "webpackConfig": {
-      "title": "Custom Webpack config",
-      "description": "The relative path to a custom webpack config",
+      "title": "Custom Webpack (or rspack) config",
+      "description": "The relative path to a custom webpack (or rspack) config",
       "$ref": "#/definitions/relativePath",
       "default": null
     },

builder/package.json

@@ -45,23 +45,20 @@
     "@lumino/signaling": "^2.1.2",
     "@lumino/virtualdom": "^2.0.1",
     "@lumino/widgets": "^2.3.2",
+    "@rspack/core": "^0.7.0",
     "ajv": "^8.12.0",
     "commander": "^9.4.1",
-    "css-loader": "^6.7.1",
+    "css-loader": "^7.1.1",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "fs-extra": "^10.1.0",
     "glob": "~7.1.6",
-    "license-webpack-plugin": "^2.3.14",
-    "mini-css-extract-plugin": "^2.7.0",
+    "license-webpack-plugin": "^4.0.2",
     "mini-svg-data-uri": "^1.4.4",
     "path-browserify": "^1.0.0",
     "process": "^0.11.10",
     "source-map-loader": "~1.0.2",
-    "style-loader": "~3.3.1",
     "supports-color": "^7.2.0",
     "terser-webpack-plugin": "^5.3.7",
-    "webpack": "^5.76.1",
-    "webpack-cli": "^5.0.1",
     "webpack-merge": "^5.8.0",
     "worker-loader": "^3.0.2"
   },
@@ -70,8 +67,11 @@
     "@types/glob": "^7.1.1",
     "@types/node": "^20.11.27",
     "@types/supports-color": "^5.3.0",
+    "@types/watchpack": "^2.4.4",
+    "@types/webpack-sources": "^3.2.3",
     "rimraf": "~5.0.5",
-    "typescript": "~5.1.6"
+    "typescript": "~5.1.6",
+    "webpack": "^5.68.0"
   },
   "publishConfig": {
     "access": "public"

builder/src/build-labextension.ts

@@ -43,7 +43,7 @@
 
 import * as path from 'path';
 import { program as commander } from 'commander';
-import webpack from 'webpack';
+import { rspack } from '@rspack/core';
 import generateConfig from './extensionConfig';
 import { stdout as colors } from 'supports-color';
 
@@ -71,7 +71,7 @@ commander
       devtool,
       watchMode: options.watch
     });
-    const compiler = webpack(config);
+    const compiler = rspack(config);
 
     let lastHash: string | null = null;
 

builder/src/build.ts

@@ -3,10 +3,9 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import miniSVGDataURI from 'mini-svg-data-uri';
 
-import * as webpack from 'webpack';
+import * as rspack from '@rspack/core';
 import * as fs from 'fs-extra';
 import * as glob from 'glob';
 import * as path from 'path';
@@ -112,15 +111,15 @@ export namespace Build {
    */
   export function ensureAssets(
     options: IEnsureOptions
-  ): webpack.Configuration[] {
+  ): rspack.Configuration[] {
     const {
       output,
       schemaOutput = output,
       themeOutput = output,
       packageNames
     } = options;
 
-    const themeConfig: webpack.Configuration[] = [];
+    const themeConfig: rspack.Configuration[] = [];
 
     const packagePaths: string[] = options.packagePaths?.slice() || [];
 
@@ -199,19 +198,22 @@ export namespace Build {
           path: path.resolve(path.join(themeOutput, 'themes', name)),
           // we won't use these JS files, only the extracted CSS
           filename: '[name].js',
-          hashFunction: 'sha256'
+          hashFunction: 'xxhash64'
         },
         module: {
           rules: [
             {
-              test: /\.css$/,
-              use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')]
+              test: /\.css$/i,
+              use: [rspack.CssExtractRspackPlugin.loader, 'css-loader']
             },
             {
               test: /\.svg/,
               type: 'asset/inline',
               generator: {
-                dataUrl: (content: any) => miniSVGDataURI(content.toString())
+                dataUrl: {
+                  content: (content: any) => miniSVGDataURI(content.content),
+                  mimetype: 'image/svg+xml'
+                }
               }
             },
             {
@@ -220,14 +222,8 @@ export namespace Build {
             }
           ]
         },
-        plugins: [
-          new MiniCssExtractPlugin({
-            // Options similar to the same options in webpackOptions.output
-            // both options are optional
-            filename: '[name].css',
-            chunkFilename: '[id].css'
-          })
-        ]
+        plugins: [new rspack.CssExtractRspackPlugin()],
+        experiments: { css: false }
       });
     });
 

builder/src/duplicate-package-checker-webpack-plugin.d.ts

@@ -18,13 +18,13 @@ declare module 'duplicate-package-checker-webpack-plugin';
 
 // Then we expand the definition with the things we use.
 declare module 'duplicate-package-checker-webpack-plugin' {
-  import * as webpack from 'webpack';
+  import * as rspack from '@rspack/core';
 
   export = DuplicatePackageCheckerWebpackPlugin;
 
   class DuplicatePackageCheckerWebpackPlugin {
     constructor(options?: DuplicatePackageCheckerWebpackPlugin.Options);
-    apply(compiler: webpack.Compiler): void;
+    apply(compiler: rspack.Compiler): void;
   }
 
   namespace DuplicatePackageCheckerWebpackPlugin {

builder/src/extensionConfig.ts

@@ -2,16 +2,17 @@
 // Distributed under the terms of the Modified BSD License.
 
 import * as path from 'path';
-import * as webpack from 'webpack';
+import * as rspack from '@rspack/core';
 import { Build } from './build';
-import { WPPlugin } from './webpack-plugins';
+// TODO: fix handling of licenses
+// import { WPPlugin } from './webpack-plugins';
 import { merge } from 'webpack-merge';
 import * as fs from 'fs-extra';
 import * as glob from 'glob';
 import Ajv from 'ajv';
 
 const baseConfig = require('./webpack.config.base');
-const { ModuleFederationPlugin } = webpack.container;
+const { ModuleFederationPlugin } = rspack.container;
 
 export interface IOptions {
   packagePath?: string;
@@ -29,7 +30,7 @@ function generateConfig({
   mode = 'production',
   devtool = mode === 'development' ? 'source-map' : undefined,
   watchMode = false
-}: IOptions = {}): webpack.Configuration[] {
+}: IOptions = {}): rspack.Configuration[] {
   const data = require(path.join(packagePath, 'package.json'));
 
   const ajv = new Ajv({ useDefaults: true, strict: false });
@@ -236,13 +237,14 @@ function generateConfig({
     new CleanupPlugin()
   ];
 
-  if (mode === 'production') {
-    plugins.push(
-      new WPPlugin.JSONLicenseWebpackPlugin({
-        excludedPackageTest: packageName => packageName === data.name
-      })
-    );
-  }
+  // TODO: re-enable
+  // if (mode === 'production') {
+  //   plugins.push(
+  //     new WPPlugin.JSONLicenseWebpackPlugin({
+  //       excludedPackageTest: packageName => packageName === data.name
+  //     })
+  //   );
+  // }
 
   // Add version argument when in production so the Jupyter server
   // allows caching of files (i.e., does not set the CacheControl header to no-cache to prevent caching static files)