feat(core): Replace Webpack with Rspack - siteConfig.future.experimental_faster.rspackBundler

packages/docusaurus-plugin-pwa/package.json

@@ -34,7 +34,7 @@
     "core-js": "^3.31.1",
     "terser-webpack-plugin": "^5.3.9",
     "tslib": "^2.6.0",
-    "webpack": "^5.88.1",
+    "webpack": "npm:@rspack/[email protected]",
     "webpack-merge": "^5.9.0",
     "webpackbar": "^5.0.2",
     "workbox-build": "^7.0.0",

packages/docusaurus-plugin-pwa/src/index.ts

@@ -6,7 +6,7 @@
  */
 
 import path from 'path';
-import webpack, {type Configuration} from 'webpack';
+import webpack, {rspack, type Configuration} from 'webpack';
 import WebpackBar from 'webpackbar';
 import Terser from 'terser-webpack-plugin';
 import {injectManifest} from 'workbox-build';
@@ -89,18 +89,22 @@ export default function pluginPWA(
       });
     },
 
+    // @ts-expect-error: todo fix
     configureWebpack(config) {
       return {
         plugins: [
-          new webpack.EnvironmentPlugin({
-            PWA_DEBUG: debug,
-            PWA_SERVICE_WORKER_URL: path.posix.resolve(
-              `${(config.output?.publicPath as string) || '/'}`,
-              'sw.js',
-            ),
-            PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES:
-              offlineModeActivationStrategies,
-          }),
+          new rspack.EnvironmentPlugin(
+            // @ts-expect-error: todo fix
+            {
+              PWA_DEBUG: debug,
+              PWA_SERVICE_WORKER_URL: path.posix.resolve(
+                `${(config.output?.publicPath as string) || '/'}`,
+                'sw.js',
+              ),
+              PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES:
+                offlineModeActivationStrategies,
+            },
+          ),
         ],
       };
     },
@@ -157,7 +161,7 @@ export default function pluginPWA(
               ],
         },
         plugins: [
-          new webpack.EnvironmentPlugin({
+          new rspack.EnvironmentPlugin({
             // Fallback value required with Webpack 5
             PWA_SW_CUSTOM: swCustom ?? '',
           }),

packages/docusaurus-theme-classic/src/index.ts

@@ -24,9 +24,11 @@ import type webpack from 'webpack';
 const requireFromDocusaurusCore = createRequire(
   require.resolve('@docusaurus/core/package.json'),
 );
+/*
 const ContextReplacementPlugin = requireFromDocusaurusCore(
   'webpack/lib/ContextReplacementPlugin',
 ) as typeof webpack.ContextReplacementPlugin;
+ */
 
 function getInfimaCSSFile(direction: string) {
   return `infima/dist/css/default/default${
@@ -99,10 +101,13 @@ export default function themeClassic(
           // This allows better optimization by only bundling those components
           // that the user actually needs, because the modules are dynamically
           // required and can't be known during compile time.
+          /*
+          ContextReplacementPlugin is not supported yet, tracked here https://github.com/web-infra-dev/rspack/issues/7474
           new ContextReplacementPlugin(
             /prismjs[\\/]components$/,
             new RegExp(`^./(${prismLanguages})$`),
           ),
+           */
         ],
       };
     },

packages/docusaurus/package.json

@@ -96,7 +96,7 @@
     "tslib": "^2.6.0",
     "update-notifier": "^6.0.2",
     "url-loader": "^4.1.1",
-    "webpack": "^5.88.1",
+    "webpack": "npm:@rspack/[email protected]",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.9.0",

packages/docusaurus/src/client/docusaurus.ts

@@ -64,18 +64,20 @@ const prefetch: Docusaurus['prefetch'] = (
 
   // Prefetch all webpack chunk assets file needed.
   return Promise.all(
-    chunkNamesNeeded.map((chunkName) => {
-      // "__webpack_require__.gca" is injected by ChunkAssetPlugin. Pass it
-      // the name of the chunk you want to load and it will return its URL.
-      // eslint-disable-next-line camelcase
-      const chunkAsset = __webpack_require__.gca(chunkName);
-
-      // In some cases, webpack might decide to optimize further, leading to
-      // the chunk assets being merged to another chunk. In this case, we can
-      // safely filter it out and don't need to load it.
-      if (chunkAsset && !chunkAsset.includes('undefined')) {
-        return prefetchHelper(chunkAsset);
-      }
+    chunkNamesNeeded.map((/* chunkName */) => {
+      /* TODO ChunkAssetPlugin not working now
+
+    // "__webpack_require__.gca" is injected by ChunkAssetPlugin. Pass it
+    // the name of the chunk you want to load and it will return its URL.
+    // eslint-disable-next-line camelcase
+    const chunkAsset = __webpack_require__.gca(chunkName);
+    // In some cases, webpack might decide to optimize further, leading to
+    // the chunk assets being merged to another chunk. In this case, we can
+    // safely filter it out and don't need to load it.
+    if (chunkAsset && !chunkAsset.includes('undefined')) {
+      return prefetchHelper(chunkAsset);
+    }
+    */
       return Promise.resolve();
     }),
   );

packages/docusaurus/src/commands/build.ts

@@ -104,10 +104,12 @@ export async function build(
         logger.info`Use code=${'npm run serve'} command to test your build locally.`;
       }
 
+      /*
       // TODO do we really need this historical forceTerminate exit???
       if (forceTerminate && isLastLocale && !cliOptions.bundleAnalyzer) {
         process.exit(0);
       }
+       */
     }),
   );
 }
@@ -353,6 +355,7 @@ async function getBuildClientConfig({
     plugins,
     config,
     isServer: false,
+    // @ts-expect-error: todo fix
     jsLoader: props.siteConfig.webpack?.jsLoader,
   });
   return {clientConfig: config, clientManifestPath: result.clientManifestPath};
@@ -368,6 +371,7 @@ async function getBuildServerConfig({props}: {props: Props}) {
     plugins,
     config,
     isServer: true,
+    // @ts-expect-error: todo fix
     jsLoader: props.siteConfig.webpack?.jsLoader,
   });
   return {serverConfig: config, serverBundlePath: result.serverBundlePath};

packages/docusaurus/src/commands/start/webpack.ts

@@ -7,7 +7,7 @@
 
 import path from 'path';
 import merge from 'webpack-merge';
-import webpack from 'webpack';
+import {rspack} from 'webpack';
 import logger from '@docusaurus/logger';
 import WebpackDevServer from 'webpack-dev-server';
 import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
@@ -139,6 +139,7 @@ async function getStartClientConfig({
     plugins,
     config,
     isServer: false,
+    // @ts-expect-error: todo fix
     jsLoader: siteConfig.webpack?.jsLoader,
   });
   return config;
@@ -159,7 +160,7 @@ export async function createWebpackDevServer({
     poll: cliOptions.poll,
   });
 
-  const compiler = webpack(config);
+  const compiler = rspack(config);
   registerWebpackE2ETestHook(compiler);
 
   const defaultDevServerConfig = await createDevServerConfig({
@@ -174,5 +175,6 @@ export async function createWebpackDevServer({
     [defaultDevServerConfig, config.devServer].filter(Boolean),
   );
 
+  // @ts-expect-error: todo fix
   return new WebpackDevServer(devServerConfig, compiler);
 }

packages/docusaurus/src/webpack/base.ts

@@ -7,7 +7,9 @@
 
 import fs from 'fs-extra';
 import path from 'path';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+// import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import {CssExtractRspackPlugin as MiniCssExtractPlugin} from 'webpack';
+
 import {md5Hash, getFileLoaderUtils} from '@docusaurus/utils';
 import {
   getCustomizableJSLoader,
@@ -87,6 +89,7 @@ export async function createBaseConfig({
   return {
     mode,
     name,
+    // @ts-expect-error: TODO fix this
     cache: {
       type: 'filesystem',
       // Can we share the same cache across locales?
@@ -131,6 +134,7 @@ export async function createBaseConfig({
     },
     devtool: isProd ? undefined : 'eval-cheap-module-source-map',
     resolve: {
+      // @ts-expect-error: TODO fix this
       unsafeCache: false, // Not enabled, does not seem to improve perf much
       extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
       symlinks: true, // See https://github.com/facebook/docusaurus/issues/3272
@@ -202,24 +206,98 @@ export async function createBaseConfig({
     },
     module: {
       rules: [
+        // @ts-expect-error: TODO fix this
         fileLoaderUtils.rules.images(),
+        // @ts-expect-error: TODO fix this
         fileLoaderUtils.rules.fonts(),
+        // @ts-expect-error: TODO fix this
         fileLoaderUtils.rules.media(),
+        // @ts-expect-error: TODO fix this
         fileLoaderUtils.rules.svg(),
+        // @ts-expect-error: TODO fix this
         fileLoaderUtils.rules.otherAssets(),
+
+        /*
         {
           test: /\.[jt]sx?$/i,
           exclude: excludeJS,
           use: [
+            // @ts-expect-error: TODO fix this
             getCustomizableJSLoader(siteConfig.webpack?.jsLoader)({
               isServer,
               babelOptions: await getCustomBabelConfigFilePath(siteDir),
             }),
           ],
         },
+         */
+
+        // TODO do we really need 3 different loaders for js, ts, tsx?
+        {
+          test: /\.jsx?$/,
+          exclude: excludeJS,
+          use: {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'ecmascript',
+                  jsx: true,
+                },
+                transform: {
+                  react: {
+                    runtime: 'automatic',
+                  },
+                },
+              },
+            },
+          },
+        },
+
+        {
+          test: /\.tsx$/,
+          exclude: excludeJS,
+          use: {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                  tsx: true,
+                },
+                transform: {
+                  react: {
+                    runtime: 'automatic',
+                  },
+                },
+              },
+            },
+          },
+        },
+        {
+          test: /\.ts$/,
+          exclude: excludeJS,
+          use: {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                  tsx: false,
+                },
+                transform: {
+                  react: {
+                    runtime: 'automatic',
+                  },
+                },
+              },
+            },
+          },
+        },
+
         {
           test: CSS_REGEX,
           exclude: CSS_MODULE_REGEX,
+          // @ts-expect-error: TODO fix this
           use: getStyleLoaders(isServer, {
             importLoaders: 1,
             sourceMap: !isProd,
@@ -229,6 +307,7 @@ export async function createBaseConfig({
         // using the extension .module.css
         {
           test: CSS_MODULE_REGEX,
+          // @ts-expect-error: TODO fix this
           use: getStyleLoaders(isServer, {
             modules: {
               localIdentName: isProd
@@ -242,6 +321,9 @@ export async function createBaseConfig({
         },
       ],
     },
+    experiments: {
+      css: false,
+    },
     plugins: [
       new MiniCssExtractPlugin({
         filename: isProd

packages/docusaurus/src/webpack/client.ts

@@ -8,12 +8,12 @@
 import path from 'path';
 import merge from 'webpack-merge';
 import WebpackBar from 'webpackbar';
-import webpack from 'webpack';
+import webpack, {rspack} from 'webpack';
 import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
 import ReactLoadableSSRAddon from 'react-loadable-ssr-addon-v5-slorber';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import {createBaseConfig} from './base';
-import ChunkAssetPlugin from './plugins/ChunkAssetPlugin';
+// import ChunkAssetPlugin from './plugins/ChunkAssetPlugin';
 import CleanWebpackPlugin from './plugins/CleanWebpackPlugin';
 import ForceTerminatePlugin from './plugins/ForceTerminatePlugin';
 import {createStaticDirectoriesCopyPlugin} from './plugins/StaticDirectoriesCopyPlugin';
@@ -42,14 +42,17 @@ async function createBaseClientConfig({
       runtimeChunk: true,
     },
     plugins: [
-      new webpack.DefinePlugin({
+      new rspack.DefinePlugin({
         'process.env.HYDRATE_CLIENT_ENTRY': JSON.stringify(hydrate),
       }),
-      new ChunkAssetPlugin(),
+
+      // new ChunkAssetPlugin(),
+
       // Show compilation progress bar and build time.
       new WebpackBar({
         name: 'Client',
       }),
+
       await createStaticDirectoriesCopyPlugin({props}),
     ].filter(Boolean),
   });

packages/docusaurus/src/webpack/configure.ts

@@ -38,11 +38,14 @@ export function applyConfigureWebpack(
 ): Configuration {
   // Export some utility functions
   const utils: ConfigureWebpackUtils = {
+    // @ts-expect-error: todo fix
     getStyleLoaders,
+    // @ts-expect-error: todo fix
     getJSLoader: getCustomizableJSLoader(jsLoader),
   };
   if (typeof configureWebpack === 'function') {
     const {mergeStrategy, ...res} =
+      // @ts-expect-error: todo fix
       configureWebpack(config, isServer, utils, content) ?? {};
     const customizeRules = mergeStrategy ?? {};
     return mergeWithCustomize({