feature: migrate from webpack to rspack

.madrun.js

@@ -39,7 +39,7 @@ export default {
     'coverage': async () => [testEnv, `c8 ${await cutEnv('test')}`],
     'coverage:report': () => 'c8 report --reporter=lcov',
     'report': () => 'c8 report --reporter=lcov',
-    '6to5': () => [buildEnv, 'webpack --progress'],
+    '6to5': () => [buildEnv, 'rspack build --config rspack.config.js'],
     '6to5:client': () => run('6to5', '--mode production'),
     '6to5:client:dev': async () => await run('6to5', '--mode development', {
         NODE_ENV: 'development',

.rspack/css.js

@@ -1,19 +1,18 @@
 import {env} from 'node:process';
-import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import {rspack} from '@rspack/core';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
+const {CssExtractRspackPlugin} = rspack;
 const isDev = env.NODE_ENV === 'development';
-const clean = (a) => a.filter(Boolean);
 
-const plugins = clean([
+const plugins = [
-    new MiniCssExtractPlugin({
+    new CssExtractRspackPlugin({
         filename: '[name].css',
     }),
-]);
+];
 
 const rules = [{
     test: /\.css$/i,
-    use: [MiniCssExtractPlugin.loader, {
+    use: [CssExtractRspackPlugin.loader, {
         loader: 'css-loader',
         options: {
             url: true,
@@ -33,13 +32,7 @@ export default {
     optimization: {
         minimize: !isDev,
         minimizer: [
-            new CssMinimizerPlugin({
+            new rspack.LightningCssMinimizerRspackPlugin(),
-                minimizerOptions: {
-                    preset: ['default', {
-                        svgo: false,
-                    }],
-                },
-            }),
         ],
     },
 };

.rspack/js.js

@@ -1,12 +1,15 @@
 import {resolve, sep} from 'node:path';
+import {fileURLToPath} from 'node:url';
 import {env} from 'node:process';
-import webpack from 'webpack';
+import {rspack} from '@rspack/core';
-import WebpackBar from 'webpackbar';
+
+const resolveModule = (a) => fileURLToPath(import.meta.resolve(a));
 
 const {
     EnvironmentPlugin,
     NormalModuleReplacementPlugin,
-} = webpack;
+    ProvidePlugin,
+} = rspack;
 
 const modules = './modules';
 const dirModules = './client/modules';
@@ -22,27 +25,34 @@ const dist = resolve(rootDir, 'dist');
 const distDev = resolve(rootDir, 'dist-dev');
 const devtool = isDev ? 'eval' : 'source-map';
 
-const notEmpty = (a) => a;
-const clean = (array) => array.filter(notEmpty);
-
 const noParse = (a) => a.endsWith('.spec.js');
-const options = {
-    babelrc: true,
-};
 
-const rules = clean([
+// codegen.macro is a babel-macro (build-time codegen), not supported by
-    !isDev && {
+// Rspack's native SWC transform, so client/sw/sw.js (the only file that
-        test: /\.[mc]?js$/,
+// uses it) keeps going through babel-loader. Everything else uses
+// Rspack's built-in SWC loader, which is the main source of the speedup.
+const rules = [
+    {
+        test: /sw\/sw\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
     },
-    isDev && {
+    {
         test: /\.[mc]?js$/,
-        exclude: /node_modules/,
+        exclude: [/node_modules/, /sw\/sw\.js$/],
-        loader: 'babel-loader',
+        loader: 'builtin:swc-loader',
-        options,
+        options: {
+            jsc: {
+                parser: {
+                    syntax: 'ecmascript',
                 },
-]);
+            },
+            env: {
+                targets: 'defaults',
+            },
+        },
+    },
+];
 
 const plugins = [
     new NormalModuleReplacementPlugin(/^node:/, (resource) => {
@@ -52,8 +62,7 @@ const plugins = [
     new EnvironmentPlugin({
         NODE_ENV,
     }),
-    new WebpackBar(),
+    new ProvidePlugin({
-    new webpack.ProvidePlugin({
         process: 'process/browser',
     }),
 ];
@@ -99,9 +108,9 @@ export default {
             'node:path': 'path',
         },
         fallback: {
-            path: import.meta.resolve('path-browserify'),
+            path: resolveModule('path-browserify'),
-            process: import.meta.resolve('process/browser'),
+            process: resolveModule('process/browser'),
-            util: import.meta.resolve('util'),
+            util: resolveModule('util'),
         },
     },
     devtool,
@@ -156,7 +165,7 @@ export default {
     },
     plugins,
     performance: {
-        maxEntrypointSize: 600_000,
+        maxEntrypointSize: 800_000,
         maxAssetSize: 600_000,
     },
 };

package.json

@@ -162,6 +162,8 @@
     "@cloudcmd/stub": "^5.0.0",
     "@iocmd/wait": "^2.1.0",
     "@putout/eslint-flat": "^4.0.0",
+    "@rspack/cli": "^2.1.4",
+    "@rspack/core": "^2.1.4",
     "@supertape/loader-css": "^1.0.0",
     "@types/node-fetch": "^2.6.11",
     "auto-globals": "^4.0.0",
@@ -171,7 +173,6 @@
     "clean-css-loader": "^4.2.1",
     "codegen.macro": "^4.0.0",
     "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^8.0.0",
     "css-modules-require-hook": "^4.2.3",
     "cssnano-preset-default": "^8.0.1",
     "domtokenlist-shim": "^1.2.0",
@@ -190,7 +191,6 @@
     "load.js": "^3.0.0",
     "madrun": "^13.0.0",
     "memfs": "^4.2.0",
-    "mini-css-extract-plugin": "^2.9.2",
     "minor": "^1.2.2",
     "morgan": "^1.6.1",
     "multi-rename": "^3.0.0",
@@ -215,10 +215,7 @@
     "unionfs": "^4.0.0",
     "url-loader": "^4.0.0",
     "util": "^0.12.5",
-    "webpack": "^5.99.9",
+    "webpack-merge": "^6.0.1"
-    "webpack-cli": "^7.0.2",
-    "webpack-merge": "^6.0.1",
-    "webpackbar": "^7.0.0"
   },
   "imports": {
     "#css/": "./css/",

rspack.config.js

@@ -0,0 +1,10 @@
+import {merge} from 'webpack-merge';
+import * as htmlConfig from './.rspack/html.js';
+import cssConfig from './.rspack/css.js';
+import jsConfig from './.rspack/js.js';
+
+export default merge([
+    jsConfig,
+    htmlConfig,
+    cssConfig,
+]);