chore(example): add webpack multi plugin example

examples/multiple-minimal/build.ts

@@ -0,0 +1,134 @@
+import webpack from 'webpack';
+import { resolve } from 'path';
+import { RsdoctorWebpackMultiplePlugin } from '@rsdoctor/webpack-plugin';
+import ArcoWebpackPlugin from '@arco-plugins/webpack-react';
+
+const baseConfig: webpack.Configuration = {
+  entry: './src/index.ts',
+  mode: 'none',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+      },
+      {
+        test: /\.less$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          { loader: 'less-loader' },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+      },
+    ],
+  },
+  resolve: {
+    mainFields: ['browser', 'module', 'main'],
+    extensions: ['.tsx', '.ts', '.js', '.json', '.wasm'],
+  },
+  output: {
+    path: resolve(__dirname, 'dist'),
+    filename: 'minimal.js',
+  },
+  optimization: {
+    concatenateModules: true,
+    usedExports: true,
+    mangleExports: true,
+    providedExports: true,
+  },
+  stats: {
+    assets: true,
+    cached: true,
+    warnings: true,
+    errors: true,
+    modules: true,
+    colors: true,
+    chunks: true,
+    builtAt: true,
+    hash: true,
+  },
+  devtool: 'source-map',
+};
+
+function webpackBuild(config: webpack.Configuration) {
+  return new Promise<void>((resolve) => {
+    webpack(config, (err, stats) => {
+      if (err) {
+        throw err;
+      }
+
+      console.log();
+
+      if (stats) {
+        console.log(
+          stats.toString({
+            chunks: false,
+            chunkModules: false,
+            chunkOrigins: false,
+            colors: true,
+            modules: false,
+            children: false,
+          }),
+        );
+      }
+
+      resolve();
+    });
+  });
+}
+
+async function build() {
+  await Promise.all([
+    webpackBuild({
+      ...baseConfig,
+      name: 'Builder 1',
+      target: 'web',
+      output: {
+        path: resolve(__dirname, 'dist'),
+        filename: 'web.js',
+      },
+      plugins: [
+        new ArcoWebpackPlugin({
+          theme: '@arco-themes/react-arco-pro',
+          modifyVars: {
+            'arcoblue-6': '#165DFF',
+          },
+        }),
+        new RsdoctorWebpackMultiplePlugin({
+          disableClientServer: !process.env.ENABLE_CLIENT_SERVER,
+          stage: 0,
+        }),
+      ],
+    }),
+    webpackBuild({
+      ...baseConfig,
+      name: 'Builder 2',
+      target: 'node',
+      output: {
+        path: resolve(__dirname, 'dist/node'),
+        filename: 'index.js',
+      },
+      // resolve: {
+      //   alias: {
+      //     antd: require.resolve('antd'),
+      //     react: require.resolve('react'),
+      //     'react-dom': require.resolve('react-dom'),
+      //     'react-router-dom': require.resolve('react-router-dom')
+      //   }
+      // },
+      plugins: [
+        new RsdoctorWebpackMultiplePlugin({
+          disableClientServer: !process.env.ENABLE_CLIENT_SERVER,
+          name: 'Builder 2',
+          stage: 1,
+        }),
+      ],
+    }),
+  ]);
+}
+
+build();

examples/multiple-minimal/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@example/rsdoctor-multiple-minimal",
+  "version": "0.0.1",
+  "description": "",
+  "files": [
+    "dist",
+    "src",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "node -r tsm build.ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@arco-design/web-react": "2.29.2",
+    "@arco-plugins/webpack-react": "1.4.9-beta.2",
+    "@types/node": "^16",
+    "@types/react": "^18",
+    "@types/react-dom": "18.0.8",
+    "@rsdoctor/tsconfig": "workspace:*",
+    "@rsdoctor/webpack-plugin": "workspace:*",
+    "css-loader": "6.7.3",
+    "eslint": "8.22.0",
+    "less-loader": "11.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "style-loader": "3.3.2",
+    "ts-loader": "9.4.2",
+    "tslib": "2.4.1",
+    "tsm": "2.3.0",
+    "typescript": "^5.2.2",
+    "webpack": "5.89.0"
+  }
+}

examples/multiple-minimal/src/app.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button } from '@arco-design/web-react';
+import '@arco-design/web-react/dist/css/arco.css';
+import styles from './index.module.less';
+
+export function App({ name }: any) {
+  return (
+    <>
+      Hello <i>{name}</i>. Welcome!
+      <>
+        <h1 className={styles.header}>标题{name}</h1>
+        <p className="worker">内容</p>
+        <Button type="primary">Hello Arco</Button>,
+      </>
+    </>
+  );
+}

examples/multiple-minimal/src/declaration.d.ts

@@ -0,0 +1,27 @@
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}
+
+declare module '*.less' {
+  const classes: { [className: string]: string };
+  export default classes;
+}
+
+declare module '*/settings.json' {
+  const value: {
+    colorWeek: boolean;
+    navbar: boolean;
+    menu: boolean;
+    footer: boolean;
+    themeColor: string;
+    menuWidth: number;
+  };
+
+  export default value;
+}
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}

examples/multiple-minimal/src/index.module.less

@@ -0,0 +1,4 @@
+.header {
+  background: var(--color-bg-2);
+  padding: 20px;
+}

examples/multiple-minimal/src/index.ts

@@ -0,0 +1,9 @@
+import { render } from 'react-dom';
+import { createElement } from 'react';
+
+import { App } from './app';
+
+render(
+  createElement(App, { name: 'Taylor' }),
+  document.getElementById('root')!,
+);

examples/multiple-minimal/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@rsdoctor/tsconfig/base",
+  "include": ["src", "webpack.config.ts"],
+  "compilerOptions": {
+    "moduleResolution": "NodeNext",
+    "outDir": "dist",
+    "baseUrl": ".",
+    "module": "NodeNext",
+    "jsx": "react",
+    "lib": ["DOM"]
+  }
+}