@docusaurus/core 0.0.0-6069 → 0.0.0-6074

package/lib/commands/build.js

@@ -99,14 +99,17 @@ async function buildLocale({ siteDir, locale, cliOptions, }) {
     const { props } = site;
     const { outDir, plugins, siteConfig } = props;
     const router = siteConfig.future.experimental_router;
+    const configureWebpackUtils = await (0, configure_1.createConfigureWebpackUtils)({ siteConfig });
     // We can build the 2 configs in parallel
     const [{ clientConfig, clientManifestPath }, { serverConfig, serverBundlePath }] = await logger_1.PerfLogger.async('Creating webpack configs', () => Promise.all([
         getBuildClientConfig({
             props,
             cliOptions,
+            configureWebpackUtils,
         }),
         getBuildServerConfig({
             props,
+            configureWebpackUtils,
         }),
     ]));
     // Run webpack to build JS bundle (client) and static html files (server).
@@ -189,12 +192,13 @@ async function executeBrokenLinksCheck({ props: { routes, siteConfig: { onBroken
         onBrokenAnchors,
     });
 }
-async function getBuildClientConfig({ props, cliOptions, }) {
+async function getBuildClientConfig({ props, cliOptions, configureWebpackUtils, }) {
     const { plugins } = props;
     const result = await (0, client_1.createBuildClientConfig)({
         props,
         minify: cliOptions.minify ?? true,
         faster: props.siteConfig.future.experimental_faster,
+        configureWebpackUtils,
         bundleAnalyzer: cliOptions.bundleAnalyzer ?? false,
     });
     let { config } = result;
@@ -202,25 +206,22 @@ async function getBuildClientConfig({ props, cliOptions, }) {
         plugins,
         config,
         isServer: false,
-        utils: await (0, configure_1.createConfigureWebpackUtils)({
-            siteConfig: props.siteConfig,
-        }),
+        configureWebpackUtils,
     });
     return { clientConfig: config, clientManifestPath: result.clientManifestPath };
 }
-async function getBuildServerConfig({ props }) {
+async function getBuildServerConfig({ props, configureWebpackUtils, }) {
     const { plugins } = props;
     const result = await (0, server_1.default)({
         props,
+        configureWebpackUtils,
     });
     let { config } = result;
     config = (0, configure_1.executePluginsConfigureWebpack)({
         plugins,
         config,
         isServer: true,
-        utils: await (0, configure_1.createConfigureWebpackUtils)({
-            siteConfig: props.siteConfig,
-        }),
+        configureWebpackUtils,
     });
     return { serverConfig: config, serverBundlePath: result.serverBundlePath };
 }

package/lib/commands/start/webpack.js

@@ -97,27 +97,32 @@ async function createDevServerConfig({ cliOptions, props, host, port, }) {
         },
     };
 }
-async function getStartClientConfig({ props, minify, poll, }) {
-    const { plugins, siteConfig } = props;
+async function getStartClientConfig({ props, minify, poll, configureWebpackUtils, }) {
+    const { plugins } = props;
     let { clientConfig: config } = await (0, client_1.createStartClientConfig)({
         props,
         minify,
         faster: props.siteConfig.future.experimental_faster,
         poll,
+        configureWebpackUtils,
     });
     config = (0, configure_1.executePluginsConfigureWebpack)({
         plugins,
         config,
         isServer: false,
-        utils: await (0, configure_1.createConfigureWebpackUtils)({ siteConfig }),
+        configureWebpackUtils,
     });
     return config;
 }
 async function createWebpackDevServer({ props, cliOptions, openUrlContext, }) {
+    const configureWebpackUtils = await (0, configure_1.createConfigureWebpackUtils)({
+        siteConfig: props.siteConfig,
+    });
     const config = await getStartClientConfig({
         props,
         minify: cliOptions.minify ?? true,
         poll: cliOptions.poll,
+        configureWebpackUtils,
     });
     const compiler = (0, webpack_1.default)(config);
     registerWebpackE2ETestHook(compiler);

package/lib/server/configValidation.js

@@ -26,12 +26,14 @@ exports.DEFAULT_FASTER_CONFIG = {
     swcJsLoader: false,
     swcJsMinimizer: false,
     mdxCrossCompilerCache: false,
+    rspackBundler: false,
 };
 // When using the "faster: true" shortcut
 exports.DEFAULT_FASTER_CONFIG_TRUE = {
     swcJsLoader: true,
     swcJsMinimizer: true,
     mdxCrossCompilerCache: true,
+    rspackBundler: true,
 };
 exports.DEFAULT_FUTURE_CONFIG = {
     experimental_faster: exports.DEFAULT_FASTER_CONFIG,
@@ -147,6 +149,7 @@ const FASTER_CONFIG_SCHEMA = utils_validation_1.Joi.alternatives()
     swcJsLoader: utils_validation_1.Joi.boolean().default(exports.DEFAULT_FASTER_CONFIG.swcJsLoader),
     swcJsMinimizer: utils_validation_1.Joi.boolean().default(exports.DEFAULT_FASTER_CONFIG.swcJsMinimizer),
     mdxCrossCompilerCache: utils_validation_1.Joi.boolean().default(exports.DEFAULT_FASTER_CONFIG.mdxCrossCompilerCache),
+    rspackBundler: utils_validation_1.Joi.boolean().default(exports.DEFAULT_FASTER_CONFIG.rspackBundler),
 }), utils_validation_1.Joi.boolean()
     .required()
     .custom((bool) => bool ? exports.DEFAULT_FASTER_CONFIG_TRUE : exports.DEFAULT_FASTER_CONFIG))

package/lib/webpack/base.d.ts

@@ -5,12 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import type { Configuration } from 'webpack';
-import type { FasterConfig, Props } from '@docusaurus/types';
+import type { ConfigureWebpackUtils, FasterConfig, Props } from '@docusaurus/types';
 export declare const clientDir: string;
 export declare function excludeJS(modulePath: string): boolean;
-export declare function createBaseConfig({ props, isServer, minify, faster, }: {
+export declare function createBaseConfig({ props, isServer, minify, faster, configureWebpackUtils, }: {
     props: Props;
     isServer: boolean;
     minify: boolean;
     faster: FasterConfig;
+    configureWebpackUtils: ConfigureWebpackUtils;
 }): Promise<Configuration>;

package/lib/webpack/base.js

@@ -12,11 +12,11 @@ exports.createBaseConfig = createBaseConfig;
 const tslib_1 = require("tslib");
 const fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
 const path_1 = tslib_1.__importDefault(require("path"));
-const mini_css_extract_plugin_1 = tslib_1.__importDefault(require("mini-css-extract-plugin"));
 const utils_1 = require("@docusaurus/utils");
 const utils_2 = require("./utils");
 const minification_1 = require("./minification");
 const aliases_1 = require("./aliases");
+const currentBundler_1 = require("./currentBundler");
 const CSS_REGEX = /\.css$/i;
 const CSS_MODULE_REGEX = /\.module\.css$/i;
 exports.clientDir = path_1.default.join(__dirname, '..', 'client');
@@ -42,7 +42,7 @@ function excludeJS(modulePath) {
         !/docusaurus(?:(?!node_modules).)*\.jsx?$/.test(modulePath) &&
         !LibrariesToTranspileRegex.test(modulePath));
 }
-async function createBaseConfig({ props, isServer, minify, faster, }) {
+async function createBaseConfig({ props, isServer, minify, faster, configureWebpackUtils, }) {
     const { outDir, siteDir, siteConfig, siteConfigPath, baseUrl, generatedFilesDir, routesPaths, siteMetadata, plugins, } = props;
     const totalPages = routesPaths.length;
     const isProd = process.env.NODE_ENV === 'production';
@@ -52,6 +52,9 @@ async function createBaseConfig({ props, isServer, minify, faster, }) {
     const mode = isProd ? 'production' : 'development';
     const themeAliases = await (0, aliases_1.loadThemeAliases)({ siteDir, plugins });
     const createJsLoader = await (0, utils_2.createJsLoaderFactory)({ siteConfig });
+    const CSSExtractPlugin = await (0, currentBundler_1.getCSSExtractPlugin)({
+        currentBundler: configureWebpackUtils.currentBundler,
+    });
     return {
         mode,
         name,
@@ -185,7 +188,7 @@ async function createBaseConfig({ props, isServer, minify, faster, }) {
                 {
                     test: CSS_REGEX,
                     exclude: CSS_MODULE_REGEX,
-                    use: (0, utils_2.getStyleLoaders)(isServer, {
+                    use: configureWebpackUtils.getStyleLoaders(isServer, {
                         importLoaders: 1,
                         sourceMap: !isProd,
                     }),
@@ -194,7 +197,7 @@ async function createBaseConfig({ props, isServer, minify, faster, }) {
                 // using the extension .module.css
                 {
                     test: CSS_MODULE_REGEX,
-                    use: (0, utils_2.getStyleLoaders)(isServer, {
+                    use: configureWebpackUtils.getStyleLoaders(isServer, {
                         modules: {
                             // Using the same CSS Module class pattern in dev/prod on purpose
                             // See https://github.com/facebook/docusaurus/pull/10423
@@ -208,7 +211,7 @@ async function createBaseConfig({ props, isServer, minify, faster, }) {
             ],
         },
         plugins: [
-            new mini_css_extract_plugin_1.default({
+            new CSSExtractPlugin({
                 filename: isProd
                     ? 'assets/css/[name].[contenthash:8].css'
                     : '[name].css',

package/lib/webpack/client.d.ts

@@ -4,20 +4,22 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import type { FasterConfig, Props } from '@docusaurus/types';
+import type { ConfigureWebpackUtils, FasterConfig, Props } from '@docusaurus/types';
 import type { Configuration } from 'webpack';
-export declare function createStartClientConfig({ props, minify, poll, faster, }: {
+export declare function createStartClientConfig({ props, minify, poll, faster, configureWebpackUtils, }: {
     props: Props;
     minify: boolean;
     poll: number | boolean | undefined;
     faster: FasterConfig;
+    configureWebpackUtils: ConfigureWebpackUtils;
 }): Promise<{
     clientConfig: Configuration;
 }>;
-export declare function createBuildClientConfig({ props, minify, faster, bundleAnalyzer, }: {
+export declare function createBuildClientConfig({ props, minify, faster, configureWebpackUtils, bundleAnalyzer, }: {
     props: Props;
     minify: boolean;
     faster: FasterConfig;
+    configureWebpackUtils: ConfigureWebpackUtils;
     bundleAnalyzer: boolean;
 }): Promise<{
     config: Configuration;

package/lib/webpack/client.js

@@ -21,12 +21,13 @@ const ChunkAssetPlugin_1 = tslib_1.__importDefault(require("./plugins/ChunkAsset
 const CleanWebpackPlugin_1 = tslib_1.__importDefault(require("./plugins/CleanWebpackPlugin"));
 const ForceTerminatePlugin_1 = tslib_1.__importDefault(require("./plugins/ForceTerminatePlugin"));
 const StaticDirectoriesCopyPlugin_1 = require("./plugins/StaticDirectoriesCopyPlugin");
-async function createBaseClientConfig({ props, hydrate, minify, faster, }) {
+async function createBaseClientConfig({ props, hydrate, minify, faster, configureWebpackUtils, }) {
     const baseConfig = await (0, base_1.createBaseConfig)({
         props,
         isServer: false,
         minify,
         faster,
+        configureWebpackUtils,
     });
     return (0, webpack_merge_1.default)(baseConfig, {
         // Useless, disabled on purpose (errors on existing sites with no
@@ -47,18 +48,22 @@ async function createBaseClientConfig({ props, hydrate, minify, faster, }) {
             new webpackbar_1.default({
                 name: 'Client',
             }),
-            await (0, StaticDirectoriesCopyPlugin_1.createStaticDirectoriesCopyPlugin)({ props }),
+            await (0, StaticDirectoriesCopyPlugin_1.createStaticDirectoriesCopyPlugin)({
+                props,
+                currentBundler: configureWebpackUtils.currentBundler,
+            }),
         ].filter(Boolean),
     });
 }
 // client config when running "docusaurus start"
-async function createStartClientConfig({ props, minify, poll, faster, }) {
+async function createStartClientConfig({ props, minify, poll, faster, configureWebpackUtils, }) {
     const { siteConfig, headTags, preBodyTags, postBodyTags } = props;
     const clientConfig = (0, webpack_merge_1.default)(await createBaseClientConfig({
         props,
         minify,
         hydrate: false,
         faster,
+        configureWebpackUtils,
     }), {
         watchOptions: {
             ignored: /node_modules\/(?!@docusaurus)/,
@@ -85,7 +90,7 @@ async function createStartClientConfig({ props, minify, poll, faster, }) {
     return { clientConfig };
 }
 // client config when running "docusaurus build"
-async function createBuildClientConfig({ props, minify, faster, bundleAnalyzer, }) {
+async function createBuildClientConfig({ props, minify, faster, configureWebpackUtils, bundleAnalyzer, }) {
     // Apply user webpack config.
     const { generatedFilesDir, siteConfig } = props;
     const router = siteConfig.future.experimental_router;
@@ -93,7 +98,13 @@ async function createBuildClientConfig({ props, minify, faster, bundleAnalyzer,
     // This is because it will always be a client-rendered React app
     const hydrate = router !== 'hash';
     const clientManifestPath = path_1.default.join(generatedFilesDir, 'client-manifest.json');
-    const config = (0, webpack_merge_1.default)(await createBaseClientConfig({ props, minify, faster, hydrate }), {
+    const config = (0, webpack_merge_1.default)(await createBaseClientConfig({
+        props,
+        minify,
+        faster,
+        configureWebpackUtils,
+        hydrate,
+    }), {
         plugins: [
             new ForceTerminatePlugin_1.default(),
             // Remove/clean build folders before building bundles.

package/lib/webpack/configure.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { createJsLoaderFactory } from './utils';
+import { getCurrentBundler } from './currentBundler';
 import type { Configuration } from 'webpack';
 import type { Plugin, ConfigureWebpackUtils, LoadedPlugin } from '@docusaurus/types';
 /**
@@ -12,7 +13,7 @@ import type { Plugin, ConfigureWebpackUtils, LoadedPlugin } from '@docusaurus/ty
  * @param config the Docusaurus config
  */
 export declare function createConfigureWebpackUtils({ siteConfig, }: {
-    siteConfig: Parameters<typeof createJsLoaderFactory>[0]['siteConfig'];
+    siteConfig: Parameters<typeof createJsLoaderFactory>[0]['siteConfig'] & Parameters<typeof getCurrentBundler>[0]['siteConfig'];
 }): Promise<ConfigureWebpackUtils>;
 /**
  * Helper function to modify webpack config
@@ -23,17 +24,17 @@ export declare function createConfigureWebpackUtils({ siteConfig, }: {
  * @param content content loaded by the plugin
  * @returns final/ modified webpack config
  */
-export declare function applyConfigureWebpack({ configureWebpack, config, isServer, utils, content, }: {
+export declare function applyConfigureWebpack({ configureWebpack, config, isServer, configureWebpackUtils, content, }: {
     configureWebpack: NonNullable<Plugin['configureWebpack']>;
     config: Configuration;
     isServer: boolean;
-    utils: ConfigureWebpackUtils;
+    configureWebpackUtils: ConfigureWebpackUtils;
     content: unknown;
 }): Configuration;
 export declare function applyConfigurePostCss(configurePostCss: NonNullable<Plugin['configurePostCss']>, config: Configuration): Configuration;
-export declare function executePluginsConfigureWebpack({ plugins, config: configInput, isServer, utils, }: {
+export declare function executePluginsConfigureWebpack({ plugins, config: configInput, isServer, configureWebpackUtils, }: {
     plugins: LoadedPlugin[];
     config: Configuration;
     isServer: boolean;
-    utils: ConfigureWebpackUtils;
+    configureWebpackUtils: ConfigureWebpackUtils;
 }): Configuration;

package/lib/webpack/configure.js

@@ -12,14 +12,19 @@ exports.applyConfigurePostCss = applyConfigurePostCss;
 exports.executePluginsConfigureWebpack = executePluginsConfigureWebpack;
 const webpack_merge_1 = require("webpack-merge");
 const utils_1 = require("./utils");
+const currentBundler_1 = require("./currentBundler");
 /**
  * Creates convenient utils to inject into the configureWebpack() lifecycle
  * @param config the Docusaurus config
  */
 async function createConfigureWebpackUtils({ siteConfig, }) {
+    const currentBundler = await (0, currentBundler_1.getCurrentBundler)({ siteConfig });
+    const getStyleLoaders = await (0, utils_1.createStyleLoadersFactory)({ currentBundler });
+    const getJSLoader = await (0, utils_1.createJsLoaderFactory)({ siteConfig });
     return {
-        getStyleLoaders: utils_1.getStyleLoaders,
-        getJSLoader: await (0, utils_1.createJsLoaderFactory)({ siteConfig }),
+        currentBundler,
+        getStyleLoaders,
+        getJSLoader,
     };
 }
 /**
@@ -31,9 +36,9 @@ async function createConfigureWebpackUtils({ siteConfig, }) {
  * @param content content loaded by the plugin
  * @returns final/ modified webpack config
  */
-function applyConfigureWebpack({ configureWebpack, config, isServer, utils, content, }) {
+function applyConfigureWebpack({ configureWebpack, config, isServer, configureWebpackUtils, content, }) {
     if (typeof configureWebpack === 'function') {
-        const { mergeStrategy, ...res } = configureWebpack(config, isServer, utils, content) ?? {};
+        const { mergeStrategy, ...res } = configureWebpack(config, isServer, configureWebpackUtils, content) ?? {};
         const customizeRules = mergeStrategy ?? {};
         return (0, webpack_merge_1.mergeWithCustomize)({
             customizeArray: (0, webpack_merge_1.customizeArray)(customizeRules),
@@ -80,7 +85,7 @@ function executePluginsConfigurePostCss({ plugins, config, }) {
     return resultConfig;
 }
 // Plugin Lifecycle - configureWebpack()
-function executePluginsConfigureWebpack({ plugins, config: configInput, isServer, utils, }) {
+function executePluginsConfigureWebpack({ plugins, config: configInput, isServer, configureWebpackUtils, }) {
     let config = configInput;
     // Step1 - Configure Webpack
     plugins.forEach((plugin) => {
@@ -90,7 +95,7 @@ function executePluginsConfigureWebpack({ plugins, config: configInput, isServer
                 configureWebpack: configureWebpack.bind(plugin), // The plugin lifecycle may reference `this`.
                 config,
                 isServer,
-                utils,
+                configureWebpackUtils,
                 content: plugin.content,
             });
         }

package/lib/webpack/currentBundler.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import type { CurrentBundler, DocusaurusConfig } from '@docusaurus/types';
+type SiteConfigSlice = {
+    future: {
+        experimental_faster: Pick<DocusaurusConfig['future']['experimental_faster'], 'rspackBundler'>;
+    };
+};
+export declare function getCurrentBundler({ siteConfig, }: {
+    siteConfig: SiteConfigSlice;
+}): Promise<CurrentBundler>;
+export declare function getCSSExtractPlugin({ currentBundler, }: {
+    currentBundler: CurrentBundler;
+}): Promise<typeof MiniCssExtractPlugin>;
+export declare function getCopyPlugin({ currentBundler, }: {
+    currentBundler: CurrentBundler;
+}): Promise<typeof CopyWebpackPlugin>;
+export {};

package/lib/webpack/currentBundler.js

@@ -0,0 +1,42 @@
+"use strict";
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentBundler = getCurrentBundler;
+exports.getCSSExtractPlugin = getCSSExtractPlugin;
+exports.getCopyPlugin = getCopyPlugin;
+const tslib_1 = require("tslib");
+const webpack_1 = tslib_1.__importDefault(require("webpack"));
+const mini_css_extract_plugin_1 = tslib_1.__importDefault(require("mini-css-extract-plugin"));
+const copy_webpack_plugin_1 = tslib_1.__importDefault(require("copy-webpack-plugin"));
+const logger_1 = tslib_1.__importDefault(require("@docusaurus/logger"));
+function isRspack(siteConfig) {
+    return siteConfig.future.experimental_faster.rspackBundler;
+}
+async function getCurrentBundler({ siteConfig, }) {
+    if (isRspack(siteConfig)) {
+        // TODO add support for Rspack
+        logger_1.default.error('Rspack bundler is not supported yet, will use Webpack instead');
+    }
+    return {
+        name: 'webpack',
+        instance: webpack_1.default,
+    };
+}
+async function getCSSExtractPlugin({ currentBundler, }) {
+    if (currentBundler.name === 'rspack') {
+        throw new Error('Rspack bundler is not supported yet');
+    }
+    return mini_css_extract_plugin_1.default;
+}
+async function getCopyPlugin({ currentBundler, }) {
+    if (currentBundler.name === 'rspack') {
+        throw new Error('Rspack bundler is not supported yet');
+    }
+    // https://github.com/webpack-contrib/copy-webpack-plugin
+    return copy_webpack_plugin_1.default;
+}

package/lib/webpack/plugins/ChunkAssetPlugin.d.ts

@@ -5,17 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type Compiler } from 'webpack';
-/**
- * We modify webpack runtime to add an extra function called
- * "__webpack_require__.gca" that will allow us to get the corresponding chunk
- * asset for a webpack chunk. Pass it the chunkName or chunkId you want to load.
- * For example: if you have a chunk named "my-chunk-name" that will map to
- * "/publicPath/0a84b5e7.c8e35c7a.js" as its corresponding output path
- * __webpack_require__.gca("my-chunk-name") will return
- * "/publicPath/0a84b5e7.c8e35c7a.js"
- *
- * "gca" stands for "get chunk asset"
- */
 export default class ChunkAssetPlugin {
     apply(compiler: Compiler): void;
 }

package/lib/webpack/plugins/ChunkAssetPlugin.js

@@ -8,44 +8,57 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const webpack_1 = tslib_1.__importDefault(require("webpack"));
-const pluginName = 'chunk-asset-plugin';
-/**
- * We modify webpack runtime to add an extra function called
- * "__webpack_require__.gca" that will allow us to get the corresponding chunk
- * asset for a webpack chunk. Pass it the chunkName or chunkId you want to load.
- * For example: if you have a chunk named "my-chunk-name" that will map to
- * "/publicPath/0a84b5e7.c8e35c7a.js" as its corresponding output path
- * __webpack_require__.gca("my-chunk-name") will return
- * "/publicPath/0a84b5e7.c8e35c7a.js"
- *
- * "gca" stands for "get chunk asset"
+// Adds a custom Docusaurus Webpack runtime function `__webpack_require__.gca`
+// gca = Get Chunk Asset, it converts a chunkName to a JS asset URL
+// It is called in Core client/docusaurus.ts for chunk preloading/prefetching
+// Example: gca("814f3328") = "/baseUrl/assets/js/814f3328.03fcc178.js"
+// See also: https://github.com/facebook/docusaurus/pull/10485
+// The name of the custom Docusaurus Webpack runtime function
+const DocusaurusGetChunkAssetFn = '__webpack_require__.gca';
+const PluginName = 'Docusaurus-ChunkAssetPlugin';
+function generateGetChunkAssetRuntimeCode(chunk) {
+    const chunkIdToName = chunk.getChunkMaps(false).name;
+    const chunkNameToId = Object.fromEntries(Object.entries(chunkIdToName).map(([chunkId, chunkName]) => [
+        chunkName,
+        chunkId,
+    ]));
+    const { 
+    // publicPath = __webpack_require__.p
+    // Example: "/" or "/baseUrl/"
+    // https://github.com/webpack/webpack/blob/v5.94.0/lib/runtime/PublicPathRuntimeModule.js
+    publicPath, 
+    // getChunkScriptFilename = __webpack_require__.u
+    // Example: getChunkScriptFilename("814f3328") = "814f3328.03fcc178.js"
+    // https://github.com/webpack/webpack/blob/v5.94.0/lib/runtime/GetChunkFilenameRuntimeModule.js
+    getChunkScriptFilename, } = webpack_1.default.RuntimeGlobals;
+    const code = `// Docusaurus function to get chunk asset
+${DocusaurusGetChunkAssetFn} = function(chunkId) { chunkId = ${JSON.stringify(chunkNameToId)}[chunkId]||chunkId; return ${publicPath} + ${getChunkScriptFilename}(chunkId); };`;
+    return webpack_1.default.Template.asString(code);
+}
+/*
+ Note: we previously used `MainTemplate.hooks.requireExtensions.tap()`
+ But it will be removed in Webpack 6 and is not supported by Rspack
+ So instead we use equivalent code inspired by:
+ - https://github.com/webpack/webpack/blob/v5.94.0/lib/RuntimePlugin.js#L462
+ - https://github.com/webpack/webpack/blob/v5.94.0/lib/runtime/CompatRuntimeModule.js
  */
 class ChunkAssetPlugin {
     apply(compiler) {
-        compiler.hooks.thisCompilation.tap(pluginName, ({ mainTemplate }) => {
-            mainTemplate.hooks.requireExtensions.tap(pluginName, (source, chunk) => {
-                const chunkIdToName = chunk.getChunkMaps(false).name;
-                const chunkNameToId = Object.fromEntries(Object.entries(chunkIdToName).map(([chunkId, chunkName]) => [
-                    chunkName,
-                    chunkId,
-                ]));
-                const buf = [source];
-                buf.push('// function to get chunk asset');
-                buf.push(
-                // If chunkName is passed, we convert it to chunk asset url
-                // .p => public path url ("/" or "/baseUrl/")
-                // .u(chunkId) =>
-                //   chunk asset url ("assets/js/x63b64xd.contentHash.js")
-                // not sure where this is documented, but this link was helpful:
-                // https://programmer.help/blogs/5d68849083e1a.html
-                //
-                // Note: __webpack_require__.gca() is called in docusaurus.ts for
-                // prefetching
-                // Note: we previously used jsonpScriptSrc (Webpack 4)
-                `__webpack_require__.gca = function(chunkId) { chunkId = ${JSON.stringify(chunkNameToId)}[chunkId]||chunkId; return __webpack_require__.p + __webpack_require__.u(chunkId); };`);
-                return webpack_1.default.Template.asString(buf);
+        compiler.hooks.thisCompilation.tap(PluginName, (compilation) => {
+            compilation.hooks.additionalTreeRuntimeRequirements.tap(PluginName, (chunk) => {
+                compilation.addRuntimeModule(chunk, new ChunkAssetRuntimeModule());
             });
         });
     }
 }
 exports.default = ChunkAssetPlugin;
+// Inspired by https://github.com/webpack/webpack/blob/v5.94.0/lib/runtime/CompatRuntimeModule.js
+class ChunkAssetRuntimeModule extends webpack_1.default.RuntimeModule {
+    constructor() {
+        super('ChunkAssetRuntimeModule', webpack_1.default.RuntimeModule.STAGE_ATTACH);
+        this.fullHash = true;
+    }
+    generate() {
+        return generateGetChunkAssetRuntimeCode(this.chunk);
+    }
+}

package/lib/webpack/plugins/StaticDirectoriesCopyPlugin.d.ts

@@ -4,8 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import CopyWebpackPlugin from 'copy-webpack-plugin';
-import type { Props } from '@docusaurus/types';
-export declare function createStaticDirectoriesCopyPlugin({ props, }: {
+import type { CurrentBundler, Props } from '@docusaurus/types';
+import type { WebpackPluginInstance } from 'webpack';
+export declare function createStaticDirectoriesCopyPlugin({ props, currentBundler, }: {
     props: Props;
-}): Promise<CopyWebpackPlugin | undefined>;
+    currentBundler: CurrentBundler;
+}): Promise<WebpackPluginInstance | undefined>;

package/lib/webpack/plugins/StaticDirectoriesCopyPlugin.js

@@ -10,8 +10,11 @@ exports.createStaticDirectoriesCopyPlugin = createStaticDirectoriesCopyPlugin;
 const tslib_1 = require("tslib");
 const path_1 = tslib_1.__importDefault(require("path"));
 const fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
-const copy_webpack_plugin_1 = tslib_1.__importDefault(require("copy-webpack-plugin"));
-async function createStaticDirectoriesCopyPlugin({ props, }) {
+const currentBundler_1 = require("../currentBundler");
+async function createStaticDirectoriesCopyPlugin({ props, currentBundler, }) {
+    const CopyPlugin = await (0, currentBundler_1.getCopyPlugin)({
+        currentBundler,
+    });
     const { outDir, siteDir, siteConfig: { staticDirectories: staticDirectoriesOption }, } = props;
     // The staticDirectories option can contain empty directories, or non-existent
     // directories (e.g. user deleted `static`). Instead of issuing an error, we
@@ -28,7 +31,7 @@ async function createStaticDirectoriesCopyPlugin({ props, }) {
     if (staticDirectories.length === 0) {
         return undefined;
     }
-    return new copy_webpack_plugin_1.default({
+    return new CopyPlugin({
         patterns: staticDirectories.map((dir) => ({
             from: dir,
             to: outDir,

package/lib/webpack/server.d.ts

@@ -4,10 +4,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import type { Props } from '@docusaurus/types';
+import type { ConfigureWebpackUtils, Props } from '@docusaurus/types';
 import type { Configuration } from 'webpack';
-export default function createServerConfig(params: {
+export default function createServerConfig({ props, configureWebpackUtils, }: {
     props: Props;
+    configureWebpackUtils: ConfigureWebpackUtils;
 }): Promise<{
     config: Configuration;
     serverBundlePath: string;

package/lib/webpack/server.js

@@ -13,13 +13,13 @@ const webpack_merge_1 = tslib_1.__importDefault(require("webpack-merge"));
 const utils_1 = require("@docusaurus/utils");
 const webpackbar_1 = tslib_1.__importDefault(require("webpackbar"));
 const base_1 = require("./base");
-async function createServerConfig(params) {
-    const { props } = params;
+async function createServerConfig({ props, configureWebpackUtils, }) {
     const baseConfig = await (0, base_1.createBaseConfig)({
         props,
         isServer: true,
         minify: false,
         faster: props.siteConfig.future.experimental_faster,
+        configureWebpackUtils,
     });
     const outputFilename = 'server.bundle.js';
     const outputDir = path_1.default.join(props.outDir, '__server');
@@ -33,8 +33,6 @@ async function createServerConfig(params) {
             path: outputDir,
             filename: outputFilename,
             libraryTarget: 'commonjs2',
-            // Workaround for Webpack 4 Bug (https://github.com/webpack/webpack/issues/6522)
-            globalObject: 'this',
         },
         plugins: [
             // Show compilation progress bar.

package/lib/webpack/utils.d.ts

@@ -4,14 +4,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import webpack, { type Configuration, type RuleSetRule } from 'webpack';
-import type { ConfigureWebpackUtils, DocusaurusConfig } from '@docusaurus/types';
+import webpack, { type Configuration } from 'webpack';
+import type { ConfigureWebpackUtils, CurrentBundler, DocusaurusConfig } from '@docusaurus/types';
 import type { TransformOptions } from '@babel/core';
 export declare function formatStatsErrorMessage(statsJson: ReturnType<webpack.Stats['toJson']> | undefined): string | undefined;
 export declare function printStatsWarnings(statsJson: ReturnType<webpack.Stats['toJson']> | undefined): void;
-export declare function getStyleLoaders(isServer: boolean, cssOptionsArg?: {
-    [key: string]: unknown;
-}): RuleSetRule[];
+export declare function createStyleLoadersFactory({ currentBundler, }: {
+    currentBundler: CurrentBundler;
+}): Promise<ConfigureWebpackUtils['getStyleLoaders']>;
 export declare function getCustomBabelConfigFilePath(siteDir: string): Promise<string | undefined>;
 export declare function getBabelOptions({ isServer, babelOptions, }?: {
     isServer?: boolean;

package/lib/webpack/utils.js

@@ -8,7 +8,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatStatsErrorMessage = formatStatsErrorMessage;
 exports.printStatsWarnings = printStatsWarnings;
-exports.getStyleLoaders = getStyleLoaders;
+exports.createStyleLoadersFactory = createStyleLoadersFactory;
 exports.getCustomBabelConfigFilePath = getCustomBabelConfigFilePath;
 exports.getBabelOptions = getBabelOptions;
 exports.createJsLoaderFactory = createJsLoaderFactory;
@@ -20,10 +20,10 @@ const path_1 = tslib_1.__importDefault(require("path"));
 const crypto_1 = tslib_1.__importDefault(require("crypto"));
 const logger_1 = tslib_1.__importDefault(require("@docusaurus/logger"));
 const utils_1 = require("@docusaurus/utils");
-const mini_css_extract_plugin_1 = tslib_1.__importDefault(require("mini-css-extract-plugin"));
 const webpack_1 = tslib_1.__importDefault(require("webpack"));
 const formatWebpackMessages_1 = tslib_1.__importDefault(require("react-dev-utils/formatWebpackMessages"));
 const faster_1 = require("../faster");
+const currentBundler_1 = require("./currentBundler");
 function formatStatsErrorMessage(statsJson) {
     if (statsJson?.errors?.length) {
         // TODO formatWebpackMessages does not print stack-traces
@@ -43,60 +43,62 @@ function printStatsWarnings(statsJson) {
         });
     }
 }
-// Utility method to get style loaders
-function getStyleLoaders(isServer, cssOptionsArg = {}) {
-    const cssOptions = {
-        // TODO turn esModule on later, see https://github.com/facebook/docusaurus/pull/6424
-        esModule: false,
-        ...cssOptionsArg,
-    };
-    // On the server we don't really need to extract/emit CSS
-    // We only need to transform CSS module imports to a styles object
-    if (isServer) {
-        return cssOptions.modules
-            ? [
-                {
-                    loader: require.resolve('css-loader'),
-                    options: cssOptions,
+async function createStyleLoadersFactory({ currentBundler, }) {
+    const CssExtractPlugin = await (0, currentBundler_1.getCSSExtractPlugin)({ currentBundler });
+    return function getStyleLoaders(isServer, cssOptionsArg = {}) {
+        const cssOptions = {
+            // TODO turn esModule on later, see https://github.com/facebook/docusaurus/pull/6424
+            esModule: false,
+            ...cssOptionsArg,
+        };
+        // On the server we don't really need to extract/emit CSS
+        // We only need to transform CSS module imports to a styles object
+        if (isServer) {
+            return cssOptions.modules
+                ? [
+                    {
+                        loader: require.resolve('css-loader'),
+                        options: cssOptions,
+                    },
+                ]
+                : // Ignore regular CSS files
+                    [{ loader: require.resolve('null-loader') }];
+        }
+        return [
+            {
+                loader: CssExtractPlugin.loader,
+                options: {
+                    esModule: true,
                 },
-            ]
-            : // Ignore regular CSS files
-                [{ loader: require.resolve('null-loader') }];
-    }
-    return [
-        {
-            loader: mini_css_extract_plugin_1.default.loader,
-            options: {
-                esModule: true,
             },
-        },
-        {
-            loader: require.resolve('css-loader'),
-            options: cssOptions,
-        },
-        // TODO apart for configurePostCss(), do we really need this loader?
-        // Note: using postcss here looks inefficient/duplicate
-        // But in practice, it's not a big deal because css-loader also uses postcss
-        // and is able to reuse the parsed AST from postcss-loader
-        // See https://github.com/webpack-contrib/css-loader/blob/master/src/index.js#L159
-        {
-            // Options for PostCSS as we reference these options twice
-            // Adds vendor prefixing based on your specified browser support in
-            // package.json
-            loader: require.resolve('postcss-loader'),
-            options: {
-                postcssOptions: {
-                    // Necessary for external CSS imports to work
-                    // https://github.com/facebook/create-react-app/issues/2677
-                    ident: 'postcss',
-                    plugins: [
-                        // eslint-disable-next-line global-require
-                        require('autoprefixer'),
-                    ],
+            {
+                loader: require.resolve('css-loader'),
+                options: cssOptions,
+            },
+            // TODO apart for configurePostCss(), do we really need this loader?
+            // Note: using postcss here looks inefficient/duplicate
+            // But in practice, it's not a big deal because css-loader also uses postcss
+            // and is able to reuse the parsed AST from postcss-loader
+            // See https://github.com/webpack-contrib/css-loader/blob/master/src/index.js#L159
+            {
+                // Options for PostCSS as we reference these options twice
+                // Adds vendor prefixing based on your specified browser support in
+                // package.json
+                loader: require.resolve('postcss-loader'),
+                options: {
+                    postcssOptions: {
+                        // Necessary for external CSS imports to work
+                        // https://github.com/facebook/create-react-app/issues/2677
+                        ident: 'postcss',
+                        plugins: [
+                            // eslint-disable-next-line global-require
+                            require('autoprefixer'),
+                        ],
+                    },
                 },
             },
-        },
-    ];
+        ];
+    };
 }
 async function getCustomBabelConfigFilePath(siteDir) {
     const customBabelConfigurationPath = path_1.default.join(siteDir, utils_1.BABEL_CONFIG_FILE_NAME);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@docusaurus/core",
   "description": "Easy to Maintain Open Source Documentation Websites",
-  "version": "0.0.0-6069",
+  "version": "0.0.0-6074",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -43,12 +43,12 @@
     "@babel/runtime": "^7.22.6",
     "@babel/runtime-corejs3": "^7.22.6",
     "@babel/traverse": "^7.22.8",
-    "@docusaurus/cssnano-preset": "0.0.0-6069",
-    "@docusaurus/logger": "0.0.0-6069",
-    "@docusaurus/mdx-loader": "0.0.0-6069",
-    "@docusaurus/utils": "0.0.0-6069",
-    "@docusaurus/utils-common": "0.0.0-6069",
-    "@docusaurus/utils-validation": "0.0.0-6069",
+    "@docusaurus/cssnano-preset": "0.0.0-6074",
+    "@docusaurus/logger": "0.0.0-6074",
+    "@docusaurus/mdx-loader": "0.0.0-6074",
+    "@docusaurus/utils": "0.0.0-6074",
+    "@docusaurus/utils-common": "0.0.0-6074",
+    "@docusaurus/utils-validation": "0.0.0-6074",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^9.1.3",
     "babel-plugin-dynamic-import-node": "^2.3.3",
@@ -104,8 +104,8 @@
     "webpackbar": "^5.0.2"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-6069",
-    "@docusaurus/types": "0.0.0-6069",
+    "@docusaurus/module-type-aliases": "0.0.0-6074",
+    "@docusaurus/types": "0.0.0-6074",
     "@total-typescript/shoehorn": "^0.1.2",
     "@types/detect-port": "^1.3.3",
     "@types/react-dom": "^18.2.7",
@@ -132,5 +132,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "7258877748d2a7c1682c5c92dae3a17734a7e59e"
+  "gitHead": "cb371a5a3300c9ebb158365a2c82be99f8543129"
 }