chore: replace webpack-chain with rspack-chain

packages/compat/webpack/src/index.ts

@@ -2,6 +2,5 @@ export { webpackProvider } from './provider';
 export type {
   // Third Party Types
   webpack,
-  WebpackChain,
   WebpackConfig,
 } from './types';

packages/compat/webpack/src/types.ts

@@ -1,5 +1,4 @@
-import type { WebpackChain } from '@rsbuild/shared';
 import type webpack from 'webpack';
 import type { Configuration as WebpackConfig } from 'webpack';
 
-export type { webpack, WebpackChain, WebpackConfig };
+export type { webpack, WebpackConfig };

packages/compat/webpack/src/webpackConfig.ts

@@ -4,7 +4,7 @@ import {
   type ModifyWebpackChainUtils,
   type ModifyWebpackConfigUtils,
   type RsbuildTarget,
-  type WebpackChain,
+  type RspackChain,
   castArray,
   chainToConfig,
   debug,
@@ -21,8 +21,8 @@ import type { WebpackConfig } from './types';
 async function modifyWebpackChain(
   context: InternalContext,
   utils: ModifyWebpackChainUtils,
-  chain: WebpackChain,
-): Promise<WebpackChain> {
+  chain: RspackChain,
+): Promise<RspackChain> {
   debug('modify webpack chain');
 
   const [modifiedChain] = await context.hooks.modifyWebpackChain.call(
@@ -160,13 +160,7 @@ export async function generateWebpackConfig({
     },
   });
 
-  const chain = await modifyWebpackChain(
-    context,
-    chainUtils,
-    // module rules not support merge
-    // need a special rule merge or use bundlerChain as WebpackChain
-    bundlerChain as unknown as WebpackChain,
-  );
+  const chain = await modifyWebpackChain(context, chainUtils, bundlerChain);
 
   let webpackConfig = chainToConfig(
     chain as unknown as BundlerChain,

packages/core/src/plugins/asset.ts

@@ -1,9 +1,9 @@
 import path from 'node:path';
 import {
   AUDIO_EXTENSIONS,
-  type BundlerChainRule,
   FONT_EXTENSIONS,
   IMAGE_EXTENSIONS,
+  type RspackChain,
   VIDEO_EXTENSIONS,
   getDistPath,
   getFilename,
@@ -19,7 +19,7 @@ const chainStaticAssetRule = ({
   assetType,
 }: {
   emit: boolean;
-  rule: BundlerChainRule;
+  rule: RspackChain.Rule;
   maxSize: number;
   filename: string;
   assetType: string;

packages/core/src/plugins/css.ts

@@ -1,14 +1,14 @@
 import path from 'node:path';
 import {
   type AutoprefixerOptions,
-  type BundlerChainRule,
   type CSSLoaderModulesMode,
   type CSSLoaderOptions,
   type ModifyChainUtils,
   type PostCSSLoaderOptions,
   type PostCSSOptions,
   type RsbuildContext,
   type RsbuildTarget,
+  type RspackChain,
   deepmerge,
   getBrowserslistWithDefault,
   isFunction,
@@ -246,7 +246,7 @@ async function applyCSSRule({
   utils: { target, isProd, CHAIN_ID },
   importLoaders = 1,
 }: {
-  rule: BundlerChainRule;
+  rule: RspackChain.Rule;
   config: NormalizedConfig;
   context: RsbuildContext;
   utils: ModifyChainUtils;

packages/core/src/plugins/manifest.ts

@@ -144,8 +144,6 @@ export const pluginManifest = (): RsbuildPlugin => ({
 
   setup(api) {
     api.modifyBundlerChain(async (chain, { CHAIN_ID }) => {
-      const htmlPaths = api.getHTMLPaths();
-
       const {
         output: { manifest },
       } = api.getNormalizedConfig();
@@ -158,6 +156,7 @@ export const pluginManifest = (): RsbuildPlugin => ({
         typeof manifest === 'string' ? manifest : 'manifest.json';
 
       const { RspackManifestPlugin } = await import('rspack-manifest-plugin');
+      const htmlPaths = api.getHTMLPaths();
 
       chain.plugin(CHAIN_ID.PLUGIN.MANIFEST).use(RspackManifestPlugin, [
         {

packages/core/src/plugins/splitChunks.ts

@@ -281,10 +281,7 @@ export const pluginSplitChunks = (): RsbuildPlugin => ({
           polyfill: config.output.polyfill,
         });
 
-        chain.optimization.splitChunks(
-          // @ts-expect-error splitChunks type mismatch
-          splitChunksOptions,
-        );
+        chain.optimization.splitChunks(splitChunksOptions);
       },
     );
   },

packages/core/src/rspack/HtmlBasicPlugin.ts

@@ -239,9 +239,12 @@ export class HtmlBasicPlugin {
 
   readonly options: HtmlBasicPluginOptions;
 
-  readonly modifyTagsFn: ModifyHTMLTagsFn;
+  readonly modifyTagsFn?: ModifyHTMLTagsFn;
 
-  constructor(options: HtmlBasicPluginOptions, modifyTagsFn: ModifyHTMLTagsFn) {
+  constructor(
+    options: HtmlBasicPluginOptions,
+    modifyTagsFn?: ModifyHTMLTagsFn,
+  ) {
     this.name = 'HtmlBasicPlugin';
     this.options = options;
     this.modifyTagsFn = modifyTagsFn;
@@ -268,20 +271,22 @@ export class HtmlBasicPlugin {
 
           addFavicon(headTags, favicon);
 
-          const result = await this.modifyTagsFn(
-            {
-              headTags: headTags.map(formatBasicTag),
-              bodyTags: bodyTags.map(formatBasicTag),
-            },
-            {
-              compilation,
-              assetPrefix: data.publicPath,
-              filename: data.outputName,
-            },
-          );
+          const tags = {
+            headTags: headTags.map(formatBasicTag),
+            bodyTags: bodyTags.map(formatBasicTag),
+          };
+
+          const modified = this.modifyTagsFn
+            ? await this.modifyTagsFn(tags, {
+                compilation,
+                assetPrefix: data.publicPath,
+                filename: data.outputName,
+              })
+            : tags;
+
           Object.assign(data, {
-            headTags: result.headTags.map(fromBasicTag),
-            bodyTags: result.bodyTags.map(fromBasicTag),
+            headTags: modified.headTags.map(fromBasicTag),
+            bodyTags: modified.bodyTags.map(fromBasicTag),
           });
 
           if (tagConfig) {

packages/plugin-css-minimizer/src/index.ts

@@ -51,10 +51,7 @@ export function applyCSSMinimizer(
 
   chain.optimization
     .minimizer(CHAIN_ID.MINIMIZER.CSS)
-    .use(CssMinimizerWebpackPlugin, [
-      // @ts-expect-error type mismatch
-      mergedOptions,
-    ])
+    .use(CssMinimizerWebpackPlugin, [mergedOptions])
     .end();
 }
 

packages/shared/package.json

@@ -107,13 +107,13 @@
     "mime-types": "^2.1.35",
     "picocolors": "1.0.1",
     "prebundle": "1.1.0",
+    "rspack-chain": "0.7.1",
     "rslog": "^1.2.2",
     "semver": "^7.6.2",
     "terser": "5.31.0",
     "typescript": "^5.4.2",
     "webpack": "^5.91.0",
     "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-chain": "npm:[email protected]",
     "webpack-merge": "5.10.0"
   },
   "optionalDependencies": {

packages/shared/prebundle.config.mjs

@@ -50,7 +50,7 @@ export default {
       ignoreDts: true,
     },
     {
-      name: 'webpack-chain',
+      name: 'rspack-chain',
       externals: {
         deepmerge: '../deepmerge',
       },

packages/shared/src/chain.ts

@@ -3,25 +3,25 @@ import { NODE_MODULES_REGEX, TS_AND_JSX_REGEX } from './constants';
 import { debug } from './logger';
 import type {
   BundlerChain,
-  BundlerChainRule,
   CreateAsyncHook,
   ModifyBundlerChainFn,
   ModifyBundlerChainUtils,
   NormalizedConfig,
   RsbuildConfig,
   RsbuildContext,
   RsbuildEntry,
+  RspackChain,
   RspackConfig,
 } from './types';
 import { isPlainObject } from './utils';
 import { castArray } from './utils';
 
 export async function getBundlerChain() {
-  const { default: WebpackChain } = await import(
-    '../compiled/webpack-chain/index.js'
+  const { default: RspackChain } = await import(
+    '../compiled/rspack-chain/index.js'
   );
 
-  const bundlerChain = new WebpackChain();
+  const bundlerChain = new RspackChain();
 
   return bundlerChain as unknown as BundlerChain;
 }
@@ -235,7 +235,7 @@ export function applyScriptCondition({
   includes,
   excludes,
 }: {
-  rule: BundlerChainRule;
+  rule: RspackChain.Rule;
   chain: BundlerChain;
   config: NormalizedConfig;
   context: RsbuildContext;
@@ -280,7 +280,7 @@ export function chainToConfig(chain: BundlerChain): RspackConfig {
   const formattedEntry: RsbuildEntry = {};
 
   /**
-   * webpack-chain can not handle entry description object correctly,
+   * rspack-chain can not handle entry description object correctly,
    * so we need to format the entry object and correct the entry description object.
    */
   for (const [entryName, entryValue] of Object.entries(entry)) {

packages/shared/src/config.ts

@@ -66,12 +66,12 @@ export async function outputInspectConfigFiles({
 }
 
 export async function stringifyConfig(config: unknown, verbose?: boolean) {
-  const { default: WebpackChain } = await import(
-    '../compiled/webpack-chain/index.js'
+  const { default: RspackChain } = await import(
+    '../compiled/rspack-chain/index.js'
   );
 
   // webpackChain.toString can be used as a common stringify method
-  const stringify = WebpackChain.toString as (
+  const stringify = RspackChain.toString as (
     config: unknown,
     options: { verbose?: boolean },
   ) => string;

packages/shared/src/types/bundlerConfig.ts

@@ -1,13 +1,11 @@
 import type { Configuration } from '@rspack/core';
-import type { WebpackChain } from './utils';
+import type { RspackChain } from './utils';
 
 export interface BundlerPluginInstance {
   [index: string]: any;
   apply: (compiler: any) => void;
 }
 
-export interface BundlerChain extends Omit<WebpackChain, 'toConfig'> {
+export interface BundlerChain extends Omit<RspackChain, 'toConfig'> {
   toConfig: () => Configuration;
 }
-
-export type BundlerChainRule = WebpackChain.Rule;

packages/shared/src/types/config/tools.ts

@@ -23,7 +23,7 @@ import type {
   StyleLoaderOptions,
   WebpackConfig,
 } from '../thirdParty';
-import type { MaybePromise, OneOrMany, WebpackChain } from '../utils';
+import type { MaybePromise, OneOrMany, RspackChain } from '../utils';
 
 export type { HTMLPluginOptions };
 
@@ -76,7 +76,7 @@ export type ToolsWebpackConfig = ConfigChainWithContext<
 >;
 
 export type ToolsWebpackChainConfig = OneOrMany<
-  (chain: WebpackChain, utils: ModifyWebpackChainUtils) => void
+  (chain: RspackChain, utils: ModifyWebpackChainUtils) => void
 >;
 
 export interface ToolsConfig {

packages/shared/src/types/hooks.ts

@@ -117,7 +117,6 @@ export type ModifyBundlerChainUtils = ModifyChainUtils & {
   };
 };
 
-/** The intersection of webpack-chain and rspack-chain */
 export type ModifyBundlerChainFn = (
   chain: BundlerChain,
   utils: ModifyBundlerChainUtils,

packages/shared/src/types/plugin.ts

@@ -31,7 +31,7 @@ import type {
 } from './hooks';
 import type { RsbuildTarget } from './rsbuild';
 import type { RspackConfig, RspackSourceMap } from './rspack';
-import type { Falsy, WebpackChain } from './utils';
+import type { Falsy, RspackChain } from './utils';
 import type { MaybePromise } from './utils';
 
 type HookOrder = 'pre' | 'post' | 'default';
@@ -77,7 +77,7 @@ export type ModifyWebpackConfigUtils = ModifyWebpackChainUtils & {
 };
 
 export type ModifyWebpackChainFn = (
-  chain: WebpackChain,
+  chain: RspackChain,
   utils: ModifyWebpackChainUtils,
 ) => Promise<void> | void;
 

packages/shared/src/types/utils.ts

@@ -1,6 +1,6 @@
-import type WebpackChain from '../../compiled/webpack-chain/index.js';
+import type RspackChain from '../../compiled/rspack-chain/index.js';
 
-export type { WebpackChain };
+export type { RspackChain };
 
 export type Falsy = false | null | undefined;