Abstract Webpack third-party plugins

slorber · slorber · commit ef3e04d753ee · 2024-09-12T18:23:43.000+02:00
diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts
@@ -8,11 +8,7 @@
 import fs from 'fs-extra';
 import path from 'path';
 import {md5Hash, getFileLoaderUtils} from '@docusaurus/utils';
-import {
-  createJsLoaderFactory,
-  getStyleLoaders,
-  getCustomBabelConfigFilePath,
-} from './utils';
+import {createJsLoaderFactory, getCustomBabelConfigFilePath} from './utils';
 import {getMinimizers} from './minification';
 import {loadThemeAliases, loadDocusaurusAliases} from './aliases';
 import {getCSSExtractPlugin} from './currentBundler';
@@ -94,7 +90,7 @@ export async function createBaseConfig({
 
   const createJsLoader = await createJsLoaderFactory({siteConfig});
 
-  const CSSExtractPlugin = getCSSExtractPlugin({
+  const CSSExtractPlugin = await getCSSExtractPlugin({
     currentBundler: configureWebpackUtils.currentBundler,
   });
 
@@ -234,7 +230,7 @@ export async function createBaseConfig({
         {
           test: CSS_REGEX,
           exclude: CSS_MODULE_REGEX,
-          use: getStyleLoaders(isServer, {
+          use: configureWebpackUtils.getStyleLoaders(isServer, {
             importLoaders: 1,
             sourceMap: !isProd,
           }),
@@ -243,7 +239,7 @@ export async function createBaseConfig({
         // using the extension .module.css
         {
           test: CSS_MODULE_REGEX,
-          use: 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
diff --git a/packages/docusaurus/src/webpack/client.ts b/packages/docusaurus/src/webpack/client.ts
@@ -64,7 +64,10 @@ async function createBaseClientConfig({
       new WebpackBar({
         name: 'Client',
       }),
-      await createStaticDirectoriesCopyPlugin({props}),
+      await createStaticDirectoriesCopyPlugin({
+        props,
+        currentBundler: configureWebpackUtils.currentBundler,
+      }),
     ].filter(Boolean),
   });
 }
diff --git a/packages/docusaurus/src/webpack/configure.ts b/packages/docusaurus/src/webpack/configure.ts
@@ -10,7 +10,7 @@ import {
   customizeArray,
   customizeObject,
 } from 'webpack-merge';
-import {createJsLoaderFactory, getStyleLoaders} from './utils';
+import {createJsLoaderFactory, createStyleLoadersFactory} from './utils';
 import {getCurrentBundler} from './currentBundler';
 import type {Configuration, RuleSetRule} from 'webpack';
 import type {
@@ -31,10 +31,12 @@ export async function createConfigureWebpackUtils({
     Parameters<typeof getCurrentBundler>[0]['siteConfig'];
 }): Promise<ConfigureWebpackUtils> {
   const currentBundler = await getCurrentBundler({siteConfig});
+  const getStyleLoaders = await createStyleLoadersFactory({currentBundler});
+  const getJSLoader = await createJsLoaderFactory({siteConfig});
   return {
     currentBundler,
     getStyleLoaders,
-    getJSLoader: await createJsLoaderFactory({siteConfig}),
+    getJSLoader,
   };
 }
 
diff --git a/packages/docusaurus/src/webpack/currentBundler.ts b/packages/docusaurus/src/webpack/currentBundler.ts
@@ -7,6 +7,7 @@
 
 import webpack from 'webpack';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
 import logger from '@docusaurus/logger';
 import type {CurrentBundler, DocusaurusConfig} from '@docusaurus/types';
 
@@ -41,13 +42,25 @@ export async function getCurrentBundler({
   };
 }
 
-export function getCSSExtractPlugin({
+export async function getCSSExtractPlugin({
   currentBundler,
 }: {
   currentBundler: CurrentBundler;
-}): typeof MiniCssExtractPlugin {
+}): Promise<typeof MiniCssExtractPlugin> {
   if (currentBundler.name === 'rspack') {
     throw new Error('Rspack bundler is not supported yet');
   }
   return MiniCssExtractPlugin;
 }
+
+export async function getCopyPlugin({
+  currentBundler,
+}: {
+  currentBundler: CurrentBundler;
+}): Promise<typeof CopyWebpackPlugin> {
+  if (currentBundler.name === 'rspack') {
+    throw new Error('Rspack bundler is not supported yet');
+  }
+  // https://github.com/webpack-contrib/copy-webpack-plugin
+  return CopyWebpackPlugin;
+}
diff --git a/packages/docusaurus/src/webpack/plugins/StaticDirectoriesCopyPlugin.ts b/packages/docusaurus/src/webpack/plugins/StaticDirectoriesCopyPlugin.ts
@@ -7,14 +7,21 @@
 
 import path from 'path';
 import fs from 'fs-extra';
-import CopyWebpackPlugin from 'copy-webpack-plugin';
-import type {Props} from '@docusaurus/types';
+import {getCopyPlugin} from '../currentBundler';
+import type {CurrentBundler, Props} from '@docusaurus/types';
+import type {WebpackPluginInstance} from 'webpack';
 
 export async function createStaticDirectoriesCopyPlugin({
   props,
+  currentBundler,
 }: {
   props: Props;
-}): Promise<CopyWebpackPlugin | undefined> {
+  currentBundler: CurrentBundler;
+}): Promise<WebpackPluginInstance | undefined> {
+  const CopyPlugin = await getCopyPlugin({
+    currentBundler,
+  });
+
   const {
     outDir,
     siteDir,
@@ -44,7 +51,7 @@ export async function createStaticDirectoriesCopyPlugin({
     return undefined;
   }
 
-  return new CopyWebpackPlugin({
+  return new CopyPlugin({
     patterns: staticDirectories.map((dir) => ({
       from: dir,
       to: outDir,
diff --git a/packages/docusaurus/src/webpack/utils.ts b/packages/docusaurus/src/webpack/utils.ts
@@ -10,11 +10,15 @@ import path from 'path';
 import crypto from 'crypto';
 import logger from '@docusaurus/logger';
 import {BABEL_CONFIG_FILE_NAME} from '@docusaurus/utils';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import webpack, {type Configuration, type RuleSetRule} from 'webpack';
+import webpack, {type Configuration} from 'webpack';
 import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';
 import {importSwcJsLoaderFactory} from '../faster';
-import type {ConfigureWebpackUtils, DocusaurusConfig} from '@docusaurus/types';
+import {getCSSExtractPlugin} from './currentBundler';
+import type {
+  ConfigureWebpackUtils,
+  CurrentBundler,
+  DocusaurusConfig,
+} from '@docusaurus/types';
 import type {TransformOptions} from '@babel/core';
 
 export function formatStatsErrorMessage(
@@ -42,68 +46,75 @@ export function printStatsWarnings(
   }
 }
 
-// Utility method to get style loaders
-export function getStyleLoaders(
-  isServer: boolean,
-  cssOptionsArg: {
-    [key: string]: unknown;
-  } = {},
-): RuleSetRule[] {
-  const cssOptions: {[key: string]: unknown} = {
-    // TODO turn esModule on later, see https://github.com/facebook/docusaurus/pull/6424
-    esModule: false,
-    ...cssOptionsArg,
-  };
+export async function createStyleLoadersFactory({
+  currentBundler,
+}: {
+  currentBundler: CurrentBundler;
+}): Promise<ConfigureWebpackUtils['getStyleLoaders']> {
+  const CssExtractPlugin = await getCSSExtractPlugin({currentBundler});
 
-  // 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 function getStyleLoaders(
+    isServer: boolean,
+    cssOptionsArg: {
+      [key: string]: unknown;
+    } = {},
+  ) {
+    const cssOptions: {[key: string]: unknown} = {
+      // TODO turn esModule on later, see https://github.com/facebook/docusaurus/pull/6424
+      esModule: false,
+      ...cssOptionsArg,
+    };
 
-  return [
-    {
-      loader: MiniCssExtractPlugin.loader,
-      options: {
-        esModule: true,
+    // 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,
+        },
+      },
+      {
+        loader: require.resolve('css-loader'),
+        options: cssOptions,
       },
-    },
-    {
-      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'),
-          ],
+      // 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'),
+            ],
+          },
         },
       },
-    },
-  ];
+    ];
+  };
 }
 
 export async function getCustomBabelConfigFilePath(
