Replace webpack with rspack (#35460)

Given that this bundler is almost a drop-in replacement to webpack, it
might be worth switching. So far it seems everything is working, but
more testing is needed, so I'm setting draft.

- Dev build time is reduced from 10s to 5s
- Prod build time is reduced from 16s to 10s
- JS output size is reduced from 21.3MB to 19.8MB
- CSS output size is increased from 778kB to 818kB

Makefile

@@ -135,10 +135,10 @@ LINUX_ARCHS ?= linux/amd64,linux/386,linux/arm-5,linux/arm-6,linux/arm64,linux/r
 GO_TEST_PACKAGES ?= $(filter-out $(shell $(GO) list code.gitea.io/gitea/models/migrations/...) code.gitea.io/gitea/tests/integration/migration-test code.gitea.io/gitea/tests code.gitea.io/gitea/tests/integration code.gitea.io/gitea/tests/e2e,$(shell $(GO) list ./... | grep -v /vendor/))
 MIGRATE_TEST_PACKAGES ?= $(shell $(GO) list code.gitea.io/gitea/models/migrations/...)
 
-WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
+RSPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
-WEBPACK_CONFIGS := webpack.config.ts tailwind.config.ts
+RSPACK_CONFIGS := rspack.config.ts tailwind.config.ts
-WEBPACK_DEST := public/assets/js/index.js public/assets/css/index.css
+RSPACK_DEST := public/assets/js/index.js public/assets/css/index.css
-WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts
+RSPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts
 
 BINDATA_DEST_WILDCARD := modules/migration/bindata.* modules/public/bindata.* modules/options/bindata.* modules/templates/bindata.*
 
@@ -238,7 +238,7 @@ node-check:
 
 .PHONY: clean-all
 clean-all: clean ## delete backend, frontend and integration files
-	rm -rf $(WEBPACK_DEST_ENTRIES) node_modules
+	rm -rf $(RSPACK_DEST_ENTRIES) node_modules
 
 .PHONY: clean
 clean: ## delete backend and integration files
@@ -428,8 +428,8 @@ watch: ## watch everything and continuously rebuild
 
 .PHONY: watch-frontend
 watch-frontend: node-check node_modules ## watch frontend files and continuously rebuild
-	@rm -rf $(WEBPACK_DEST_ENTRIES)
+	@rm -rf $(RSPACK_DEST_ENTRIES)
-	NODE_ENV=development $(NODE_VARS) pnpm exec webpack --watch --progress --disable-interpret
+	NODE_ENV=development $(NODE_VARS) pnpm exec rspack --watch
 
 .PHONY: watch-backend
 watch-backend: go-check ## watch backend files and continuously rebuild
@@ -747,7 +747,7 @@ install: $(wildcard *.go)
 build: frontend backend ## build everything
 
 .PHONY: frontend
-frontend: $(WEBPACK_DEST) ## build frontend files
+frontend: $(RSPACK_DEST) ## build frontend files
 
 .PHONY: backend
 backend: go-check generate-backend $(EXECUTABLE) ## build backend files
@@ -878,15 +878,15 @@ update-py: node-check | node_modules ## update py dependencies
 	uv sync
 	@touch .venv
 
-.PHONY: webpack
+.PHONY: rspack
-webpack: $(WEBPACK_DEST) ## build webpack files
+rspack: $(RSPACK_DEST) ## build rspack files
 
-$(WEBPACK_DEST): $(WEBPACK_SOURCES) $(WEBPACK_CONFIGS) pnpm-lock.yaml
+$(RSPACK_DEST): $(RSPACK_SOURCES) $(RSPACK_CONFIGS) pnpm-lock.yaml
 	@$(MAKE) -s node-check node_modules
-	@rm -rf $(WEBPACK_DEST_ENTRIES)
+	@rm -rf $(RSPACK_DEST_ENTRIES)
-	@echo "Running webpack..."
+	@echo "Running rspack..."
-	@BROWSERSLIST_IGNORE_OLD_DATA=true $(NODE_VARS) pnpm exec webpack --disable-interpret
+	@$(NODE_VARS) pnpm exec rspack
-	@touch $(WEBPACK_DEST)
+	@touch $(RSPACK_DEST)
 
 .PHONY: svg
 svg: node-check | node_modules ## build svg files

package.json

@@ -16,9 +16,11 @@
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
     "@primer/octicons": "19.18.0",
     "@resvg/resvg-wasm": "2.6.2",
+    "@rspack/cli": "1.5.3",
+    "@rspack/core": "1.5.3",
     "@silverwind/vue3-calendar-heatmap": "2.0.6",
     "@techknowlogick/license-checker-webpack-plugin": "0.3.0",
-    "add-asset-webpack-plugin": "3.0.0",
+    "add-asset-webpack-plugin": "3.1.0",
     "ansi_up": "6.0.6",
     "asciinema-player": "3.10.0",
     "chart.js": "4.5.0",
@@ -30,13 +32,11 @@
     "dayjs": "1.11.18",
     "dropzone": "6.0.0-beta.2",
     "easymde": "2.20.0",
-    "esbuild-loader": "4.3.0",
     "htmx.org": "2.0.7",
     "idiomorph": "0.7.3",
     "jquery": "3.7.1",
     "katex": "0.16.22",
     "mermaid": "11.11.0",
-    "mini-css-extract-plugin": "2.9.4",
     "minimatch": "10.0.3",
     "monaco-editor": "0.53.0",
     "monaco-editor-webpack-plugin": "7.1.0",
@@ -61,8 +61,6 @@
     "vue-bar-graph": "2.2.0",
     "vue-chartjs": "5.3.2",
     "vue-loader": "17.4.2",
-    "webpack": "5.101.3",
-    "webpack-cli": "6.0.1",
     "wrap-ansi": "9.0.2"
   },
   "devDependencies": {

rspack.config.ts

@@ -1,12 +1,17 @@
 import wrapAnsi from 'wrap-ansi';
 import AddAssetPlugin from 'add-asset-webpack-plugin';
 import LicenseCheckerWebpackPlugin from '@techknowlogick/license-checker-webpack-plugin';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 import {VueLoaderPlugin} from 'vue-loader';
-import EsBuildLoader from 'esbuild-loader';
 import {parse} from 'node:path';
-import webpack, {type Configuration, type EntryObject} from 'webpack';
+import {
+  SourceMapDevToolPlugin,
+  DefinePlugin,
+  EnvironmentPlugin,
+  CssExtractRspackPlugin,
+  type Configuration,
+  type EntryObject,
+} from '@rspack/core';
 import {fileURLToPath} from 'node:url';
 import {readFileSync, globSync} from 'node:fs';
 import {env} from 'node:process';
@@ -15,8 +20,6 @@ import tailwindConfig from './tailwind.config.ts';
 import tailwindcssNesting from 'tailwindcss/nesting/index.js';
 import postcssNesting from 'postcss-nesting';
 
-const {EsbuildPlugin} = EsBuildLoader;
-const {SourceMapDevToolPlugin, DefinePlugin, EnvironmentPlugin} = webpack;
 const formatLicenseText = (licenseText: string) => wrapAnsi(licenseText || '', 80).trim();
 
 const themes: EntryObject = {};
@@ -30,7 +33,7 @@ const isProduction = env.NODE_ENV !== 'development';
 // true - all enabled, the default in development
 // reduced - minimal sourcemaps, the default in production
 // false - all disabled
-let sourceMaps;
+let sourceMaps: string;
 if ('ENABLE_SOURCEMAP' in env) {
   sourceMaps = ['true', 'false'].includes(env.ENABLE_SOURCEMAP) ? env.ENABLE_SOURCEMAP : 'reduced';
 } else {
@@ -93,20 +96,12 @@ export default {
     path: fileURLToPath(new URL('public/assets', import.meta.url)),
     filename: () => 'js/[name].js',
     chunkFilename: ({chunk}) => {
-      const language = (/monaco.*languages?_.+?_(.+?)_/.exec(String(chunk.id)) || [])[1];
+      const language = (/monaco.*languages?_.+?_(.+?)_/.exec(chunk.id) || [])[1];
       return `js/${language ? `monaco-language-${language.toLowerCase()}` : `[name]`}.[contenthash:8].js`;
     },
   },
   optimization: {
     minimize: isProduction,
-    minimizer: [
-      new EsbuildPlugin({
-        target: 'es2020',
-        minify: true,
-        css: true,
-        legalComments: 'none',
-      }),
-    ],
     splitChunks: {
       chunks: 'async',
       name: (_, chunks) => chunks.map((item) => item.name).join('-'),
@@ -118,45 +113,34 @@ export default {
     rules: [
       {
         test: /\.vue$/i,
-        exclude: /node_modules/,
+        exclude: /[\\/]node_modules[\\/]/,
         loader: 'vue-loader',
         options: {
           compilerOptions: {
             isCustomElement: (tag: string) => webComponents.has(tag),
           },
+          experimentalInlineMatchResource: true,
         },
       },
       {
-        test: /\.js$/i,
+        test: /\.(j|t)s$/i,
-        exclude: /node_modules/,
+        exclude: /[\\/]node_modules[\\/]/,
-        use: [
+        loader: 'builtin:swc-loader',
-          {
-            loader: 'esbuild-loader',
         options: {
-              loader: 'js',
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+            },
+            externalHelpers: false,
             target: 'es2020',
           },
         },
-        ],
-      },
-      {
-        test: /\.ts$/i,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'esbuild-loader',
-            options: {
-              loader: 'ts',
-              target: 'es2020',
-            },
-          },
-        ],
       },
       {
         test: /\.css$/i,
         use: [
           {
-            loader: MiniCssExtractPlugin.loader,
+            loader: CssExtractRspackPlugin.loader,
           },
           {
             loader: 'css-loader',
@@ -205,7 +189,7 @@ export default {
       TEST: 'false',
     }),
     new VueLoaderPlugin(),
-    new MiniCssExtractPlugin({
+    new CssExtractRspackPlugin({
       filename: 'css/[name].css',
       chunkFilename: 'css/[name].[contenthash:8].css',
     }),
@@ -257,7 +241,7 @@ export default {
   },
   stats: {
     assetsSort: 'name',
-    assetsSpace: Infinity,
+    assetsSpace: Number.MAX_SAFE_INTEGER,
     cached: false,
     cachedModules: false,
     children: false,

types.d.ts

@@ -1,8 +1,3 @@
-declare module 'add-asset-webpack-plugin' {
-  const plugin: any;
-  export = plugin
-}
-
 declare module '@techknowlogick/license-checker-webpack-plugin' {
   const plugin: any;
   export = plugin