feat(webpack): use Rslib to bundle

e2e/cases/config/inspect-config/index.test.ts

@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { createRsbuild } from '@e2e/helper';
+import { createRsbuild, rspackOnlyTest } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
 
 const rsbuildConfig = path.resolve(
@@ -106,7 +106,7 @@ test('should not generate config files when writeToDisk is false', async () => {
   expect(fs.existsSync(bundlerConfig)).toBeFalsy();
 });
 
-test('should allow to specify absolute output path', async () => {
+rspackOnlyTest('should allow to specify absolute output path', async () => {
   const rsbuild = await createRsbuild({
     cwd: __dirname,
   });

packages/compat/webpack/package.json

@@ -11,21 +11,20 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist-types/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
   },
   "main": "./dist/index.cjs",
-  "types": "./dist-types/index.d.ts",
+  "types": "./dist/index.d.ts",
   "files": [
     "static",
-    "dist",
-    "dist-types"
+    "dist"
   ],
   "scripts": {
-    "build": "modern build",
-    "dev": "modern build --watch"
+    "build": "rslib build",
+    "dev": "rslib build --watch"
   },
   "dependencies": {
     "copy-webpack-plugin": "11.0.0",

packages/compat/webpack/rslib.config.ts

@@ -0,0 +1,15 @@
+import path from 'node:path';
+import { pureEsmPackage } from '@rsbuild/config/rslib.config.ts';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  ...pureEsmPackage,
+  output: {
+    ...pureEsmPackage.output,
+    copy: [
+      {
+        from: path.resolve(__dirname, 'src/index.cjs'),
+      },
+    ],
+  },
+});

packages/compat/webpack/src/build.ts

@@ -2,9 +2,9 @@ import { logger } from '@rsbuild/core';
 import type { Build, BuildOptions, Rspack } from '@rsbuild/core';
 import type { Configuration as WebpackConfig } from 'webpack';
 import WebpackMultiStats from 'webpack/lib/MultiStats.js';
-import { createCompiler } from './createCompiler';
-import type { InitConfigsOptions } from './initConfigs';
-import { registerBuildHook } from './shared';
+import { createCompiler } from './createCompiler.js';
+import type { InitConfigsOptions } from './initConfigs.js';
+import { registerBuildHook } from './shared.js';
 
 export const build = async (
   initOptions: InitConfigsOptions,

packages/compat/webpack/src/createCompiler.ts

@@ -1,7 +1,7 @@
 import { type Rspack, logger } from '@rsbuild/core';
 import WebpackMultiStats from 'webpack/lib/MultiStats.js';
-import { type InitConfigsOptions, initConfigs } from './initConfigs';
-import { formatStats, getStatsOptions, registerDevHook } from './shared';
+import { type InitConfigsOptions, initConfigs } from './initConfigs.js';
+import { formatStats, getStatsOptions, registerDevHook } from './shared.js';
 
 export async function createCompiler(options: InitConfigsOptions) {
   logger.debug('create compiler');

packages/compat/webpack/src/index.cjs

@@ -0,0 +1,5 @@
+/**
+ * CommonJS wrapper
+ */
+module.exports.webpackProvider = (...args) =>
+  import('./index.js').then((i) => i.webpackProvider(...args));

packages/compat/webpack/src/index.ts

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

packages/compat/webpack/src/initConfigs.ts

@@ -4,10 +4,10 @@ import {
   type ResolvedCreateRsbuildOptions,
   logger,
 } from '@rsbuild/core';
-import { inspectConfig } from './inspectConfig';
-import { type InternalContext, initRsbuildConfig } from './shared';
-import type { WebpackConfig } from './types';
-import { generateWebpackConfig } from './webpackConfig';
+import { inspectConfig } from './inspectConfig.js';
+import { type InternalContext, initRsbuildConfig } from './shared.js';
+import type { WebpackConfig } from './types.js';
+import { generateWebpackConfig } from './webpackConfig.js';
 
 export type InitConfigsOptions = {
   context: InternalContext;

packages/compat/webpack/src/inspectConfig.ts

@@ -1,13 +1,13 @@
 import { isAbsolute, join } from 'node:path';
 import type { InspectConfigOptions, InspectConfigResult } from '@rsbuild/core';
-import { type InitConfigsOptions, initConfigs } from './initConfigs';
+import { type InitConfigsOptions, initConfigs } from './initConfigs.js';
 import {
   type InternalContext,
   getRsbuildInspectConfig,
   outputInspectConfigFiles,
   stringifyConfig,
-} from './shared';
-import type { WebpackConfig } from './types';
+} from './shared.js';
+import type { WebpackConfig } from './types.js';
 
 const getInspectOutputPath = (
   context: InternalContext,

packages/compat/webpack/src/plugin.ts

@@ -6,7 +6,7 @@ import type {
   Rspack,
   RspackChain,
 } from '@rsbuild/core';
-import { castArray } from './shared';
+import { castArray } from './shared.js';
 
 async function applyTsConfigPathsPlugin({
   chain,
@@ -77,7 +77,7 @@ export const pluginAdaptor = (): RsbuildPlugin => ({
       // enable progress bar for webpack by default
       const progress = config.dev.progressBar ?? true;
       if (progress) {
-        const { ProgressPlugin } = await import('./progress/ProgressPlugin');
+        const { ProgressPlugin } = await import('./progress/ProgressPlugin.js');
         chain.plugin(CHAIN_ID.PLUGIN.PROGRESS).use(ProgressPlugin, [
           {
             id: environment.name,

packages/compat/webpack/src/progress/ProgressPlugin.ts

@@ -1,10 +1,10 @@
 import { logger } from '@rsbuild/core';
 import color from 'picocolors';
 import webpack from 'webpack';
-import { prettyTime } from '../shared';
-import { bus, createFriendlyPercentage } from './helpers';
-import { createNonTTYLogger } from './helpers/nonTty';
-import type { Props } from './helpers/types';
+import { prettyTime } from '../shared.js';
+import { bus, createFriendlyPercentage } from './helpers/index.js';
+import { createNonTTYLogger } from './helpers/nonTty.js';
+import type { Props } from './helpers/types.js';
 
 export interface ProgressOptions
   extends Omit<Partial<Props>, 'message' | 'total' | 'current' | 'done'> {

packages/compat/webpack/src/progress/helpers/bar.ts

@@ -1,7 +1,7 @@
 import cliTruncate from 'cli-truncate';
 import colors from 'picocolors';
-import type { Props } from './types';
-import { clamp } from './utils';
+import type { Props } from './types.js';
+import { clamp } from './utils.js';
 
 const defaultOption: Props = {
   total: 100,

packages/compat/webpack/src/progress/helpers/bus.ts

@@ -1,10 +1,10 @@
 import { Console } from 'node:console';
 import cliTruncate from 'cli-truncate';
 import patchConsole from 'patch-console';
-import { FULL_WIDTH, renderBar } from './bar';
-import { create } from './log';
-import type { LogUpdate } from './log';
-import type { Colors, Props } from './types';
+import { FULL_WIDTH, renderBar } from './bar.js';
+import { create } from './log.js';
+import type { LogUpdate } from './log.js';
+import type { Colors, Props } from './types.js';
 
 const colorList: Colors[] = ['green', 'cyan', 'yellow', 'blue', 'magenta'];
 

packages/compat/webpack/src/progress/helpers/index.ts

@@ -1,4 +1,4 @@
-export * from './bus';
-export * from './bar';
-export * from './types';
-export * from './percentage';
+export * from './bus.js';
+export * from './bar.js';
+export * from './types.js';
+export * from './percentage.js';

packages/compat/webpack/src/provider.ts

@@ -1,6 +1,10 @@
 import type { CreateCompiler, RsbuildProvider } from '@rsbuild/core';
-import { initConfigs } from './initConfigs';
-import { createDevServer, initRsbuildConfig } from './shared';
+import { build } from './build.js';
+import { createCompiler as baseCreateCompiler } from './createCompiler.js';
+import { initConfigs } from './initConfigs.js';
+import { inspectConfig } from './inspectConfig.js';
+import { pluginAdaptor } from './plugin.js';
+import { createDevServer, initRsbuildConfig } from './shared.js';
 
 export const webpackProvider: RsbuildProvider<'webpack'> = async ({
   context,
@@ -12,16 +16,14 @@ export const webpackProvider: RsbuildProvider<'webpack'> = async ({
   setCssExtractPlugin(cssExtractPlugin);
 
   const createCompiler = (async () => {
-    const { createCompiler } = await import('./createCompiler');
-    const result = await createCompiler({
+    const result = await baseCreateCompiler({
       context,
       pluginManager,
       rsbuildOptions,
     });
     return result.compiler;
   }) as CreateCompiler;
 
-  const { pluginAdaptor } = await import('./plugin');
   pluginManager.addPlugins([pluginAdaptor()]);
 
   return {
@@ -68,12 +70,10 @@ export const webpackProvider: RsbuildProvider<'webpack'> = async ({
     },
 
     async build(options) {
-      const { build } = await import('./build');
       return build({ context, pluginManager, rsbuildOptions }, options);
     },
 
     async inspectConfig(inspectOptions) {
-      const { inspectConfig } = await import('./inspectConfig');
       return await inspectConfig({
         context,
         pluginManager,

packages/compat/webpack/src/webpackConfig.ts

@@ -16,8 +16,8 @@ import {
   chainToConfig,
   getChainUtils as getBaseChainUtils,
   modifyBundlerChain,
-} from './shared';
-import type { WebpackConfig } from './types';
+} from './shared.js';
+import type { WebpackConfig } from './types.js';
 
 async function modifyWebpackChain(
   context: InternalContext,

packages/compat/webpack/tsconfig.json

@@ -1,7 +1,6 @@
 {
-  "extends": "@rsbuild/config/tsconfig",
+  "extends": "@rsbuild/config/tsconfig-node16",
   "compilerOptions": {
-    "declarationDir": "./dist-types",
     "outDir": "./dist",
     "baseUrl": "./",
     "rootDir": "src",

scripts/config/rslib.config.ts

@@ -1,19 +1,23 @@
-import { defineConfig } from '@rslib/core';
+import { type LibConfig, defineConfig } from '@rslib/core';
 
 export const commonExternals: Array<string | RegExp> = [
   'webpack',
   /[\\/]compiled[\\/]/,
 ];
 
+export const esmConfig: LibConfig = {
+  format: 'esm',
+  syntax: 'es2021',
+  dts: { bundle: false },
+};
+
+export const cjsConfig: LibConfig = {
+  format: 'cjs',
+  syntax: 'es2021',
+};
+
 export const dualPackage = defineConfig({
-  lib: [
-    {
-      format: 'esm',
-      syntax: 'es2021',
-      dts: { bundle: false },
-    },
-    { format: 'cjs', syntax: 'es2021' },
-  ],
+  lib: [esmConfig, cjsConfig],
   output: {
     target: 'node',
   },
@@ -23,3 +27,8 @@ export const dualPackage = defineConfig({
     },
   },
 });
+
+export const pureEsmPackage = defineConfig({
+  ...dualPackage,
+  lib: [esmConfig],
+});