chore: upgrade rspack version (#36)

* chore: upgrade rspack version * fix: remove ssr template string
type-challenges · May 22, 2024 · 97ceeb2 · 97ceeb2
1 parent a4d8439
commit 97ceeb2
Show file tree

Hide file tree

Showing 5 changed files with 337 additions and 889 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,6 @@
     "*.less"
   ],
   "dependencies": {
-    "@arco-design/theme-line": "^0.0.3",
     "@arco-design/web-react": "^2.53.2",
     "@monaco-editor/react": "^4.6.0",
     "axios": "^1.5.1",
@@ -49,12 +48,13 @@
     "rehype-katex": "^6.0.3",
     "remark-math": "^6.0.0",
     "styled-components": "^6.1.0",
+    "ts-deepmerge": "^7.0.0",
     "type-assertions": "^1.1.0"
   },
   "devDependencies": {
-    "@arco-plugins/unplugin-react": "^1.0.0-alpha.1",
-    "@rspack/cli": "^0.3.5",
-    "@rspack/plugin-html": "^0.3.11",
+    "@rspack/cli": "^0.6.5",
+    "@rspack/core": "^0.6.5",
+    "@rspack/plugin-html": "^0.5.8",
     "@svgr/webpack": "^8.1.0",
     "@types/event-emitter": "^0.3.4",
     "@types/lodash.debounce": "^4.0.7",
@@ -68,7 +68,6 @@
     "@typescript-eslint/parser": "^6.7.3",
     "browserslist": "^4.22.1",
     "commitlint": "^17.7.1",
-    "css-loader": "^6.8.1",
     "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -85,7 +84,6 @@
     "monaco-editor": "^0.44.0",
     "prettier": "^3.0.3",
     "prompts": "^2.4.2",
-    "style-loader": "^3.3.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2"
   },

diff --git a/tools/rspack.base.config.ts b/tools/rspack.base.config.ts
@@ -1,9 +1,11 @@
 import path from 'path';
 import type { Configuration } from '@rspack/cli';
+import type { SwcLoaderOptions } from '@rspack/core';
 
 export default function createBaseRspackConfig(): Configuration {
+  const mode = process.env.NODE_ENV as Configuration['mode'];
   return {
-    context: path.resolve(__dirname, '..'),
+    mode,
     output: {
       path: './dist',
       filename: '[name].[contenthash:8].bundle.js',
@@ -12,19 +14,20 @@ export default function createBaseRspackConfig(): Configuration {
     },
     resolve: {
       alias: {
-        '@config': './config',
-        '@problems': './problems',
-        '@src': './src',
+        '@config': path.resolve(__dirname, '../config'),
+        '@problems': path.resolve(__dirname, '../problems'),
+        '@src': path.resolve(__dirname, '../src'),
       },
+      extensions: ['...', 'js', '.ts', 'jsx', '.tsx'],
     },
-    builtins: {
-      css: {
-        modules: {
-          localIdentName: '[path][name]__[local]--[hash:6]',
-        },
-      },
+    experiments: {
+      css: true,
     },
     module: {
+      parser: {
+        css: { namedExports: false },
+        'css/module': { namedExports: false },
+      },
       rules: [
         {
           resourceQuery: /url$/,
@@ -34,6 +37,11 @@ export default function createBaseRspackConfig(): Configuration {
           resourceQuery: /raw$/,
           type: 'asset/source',
         },
+        {
+          test: /\.svg$/,
+          issuer: /\.[jt]sx?$/,
+          use: ['@svgr/webpack'],
+        },
         {
           test: /\.less$/i,
           use: [
@@ -63,9 +71,35 @@ export default function createBaseRspackConfig(): Configuration {
           type: 'css/module',
         },
         {
-          test: /\.svg$/,
-          issuer: /\.[jt]sx?$/,
-          use: ['@svgr/webpack'],
+          test: /\.(jsx?|tsx?)$/,
+          exclude: [/problems\//],
+          use: [
+            {
+              loader: 'builtin:swc-loader',
+              options: {
+                jsc: {
+                  parser: {
+                    syntax: 'typescript',
+                    tsx: true,
+                  },
+                  transform: {
+                    react: {
+                      runtime: 'automatic',
+                    },
+                  },
+                },
+                rspackExperiments: {
+                  import: [
+                    {
+                      libraryName: '@arco-design/web-react',
+                      customName: '@arco-design/web-react/es/{{ member }}',
+                      style: true,
+                    },
+                  ],
+                },
+              } as SwcLoaderOptions,
+            },
+          ],
         },
       ],
     },

diff --git a/tools/rspack.config.ts b/tools/rspack.config.ts
@@ -1,17 +1,15 @@
 import type { Configuration } from '@rspack/cli';
 import HtmlRspackPlugin from '@rspack/plugin-html';
 import { CopyRspackPlugin, DefinePlugin } from '@rspack/core';
-import { ArcoDesignPlugin } from '@arco-plugins/unplugin-react';
+import { merge as deepmerge } from 'ts-deepmerge';
 import RspackSSRPlugin from './RspackSSRPlugin';
 import createBaseRspackConfig from './rspack.base.config';
 
 export default function createRspackConfig(): Configuration {
   const baseConfig = createBaseRspackConfig();
   const mode = process.env.NODE_ENV as Configuration['mode'];
   const template = './html/index.html';
-  return {
-    ...baseConfig,
-    mode,
+  return deepmerge<[Configuration, Configuration]>(baseConfig, {
     stats: mode === 'production',
     entry: {
       main: './src/main.tsx',
@@ -45,10 +43,6 @@ export default function createRspackConfig(): Configuration {
       new DefinePlugin({
         WEBPACK_IS_SSR: false,
       }),
-      new ArcoDesignPlugin({
-        style: 'css',
-        theme: '@arco-design/theme-line',
-      }),
     ],
     optimization: {
       splitChunks: {
@@ -79,5 +73,5 @@ export default function createRspackConfig(): Configuration {
         },
       },
     },
-  };
+  });
 }
diff --git a/tools/rspack.ssr.config.ts b/tools/rspack.ssr.config.ts
@@ -1,13 +1,11 @@
 import type { Configuration } from '@rspack/cli';
 import { HtmlRspackPlugin, DefinePlugin } from '@rspack/core';
+import { merge as deepmerge } from 'ts-deepmerge';
 import createBaseRspackConfig from './rspack.base.config';
 
 export default function createSSRRspackConfig(): Configuration {
   const baseConfig = createBaseRspackConfig();
-  const mode = process.env.NODE_ENV as Configuration['mode'];
-  return {
-    ...baseConfig,
-    mode,
+  return deepmerge<[Configuration, Configuration]>(baseConfig, {
     target: 'node',
     entry: {
       ssr: './src/ssr.tsx',
@@ -28,5 +26,5 @@ export default function createSSRRspackConfig(): Configuration {
         WEBPACK_IS_SSR: true,
       }),
     ],
-  };
+  });
 }