From 0638ca32cba97b30352eaec70cdf9c6789bc7df5 Mon Sep 17 00:00:00 2001 From: coderaiser Date: Thu, 16 Jul 2026 12:18:43 +0300 Subject: [PATCH] feature: migrate from webpack to rspack --- .madrun.js | 2 +- {.webpack => .rspack}/css.js | 21 +++++-------- {.webpack => .rspack}/html.js | 0 {.webpack => .rspack}/js.js | 55 ++++++++++++++++++++--------------- package.json | 9 ++---- rspack.config.js | 10 +++++++ 6 files changed, 53 insertions(+), 44 deletions(-) rename {.webpack => .rspack}/css.js (53%) rename {.webpack => .rspack}/html.js (100%) rename {.webpack => .rspack}/js.js (81%) create mode 100644 rspack.config.js diff --git a/.madrun.js b/.madrun.js index 9c75535f..efa8ce98 100644 --- a/.madrun.js +++ b/.madrun.js @@ -39,7 +39,7 @@ export default { 'coverage': async () => [testEnv, `c8 ${await cutEnv('test')}`], 'coverage:report': () => 'c8 report --reporter=lcov', 'report': () => 'c8 report --reporter=lcov', - '6to5': () => [buildEnv, 'webpack --progress'], + '6to5': () => [buildEnv, 'rspack build --config rspack.config.js'], '6to5:client': () => run('6to5', '--mode production'), '6to5:client:dev': async () => await run('6to5', '--mode development', { NODE_ENV: 'development', diff --git a/.webpack/css.js b/.rspack/css.js similarity index 53% rename from .webpack/css.js rename to .rspack/css.js index 311290cc..10d28250 100644 --- a/.webpack/css.js +++ b/.rspack/css.js @@ -1,19 +1,18 @@ import {env} from 'node:process'; -import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'; -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import {rspack} from '@rspack/core'; +const {CssExtractRspackPlugin} = rspack; const isDev = env.NODE_ENV === 'development'; -const clean = (a) => a.filter(Boolean); -const plugins = clean([ - new MiniCssExtractPlugin({ +const plugins = [ + new CssExtractRspackPlugin({ filename: '[name].css', }), -]); +]; const rules = [{ test: /\.css$/i, - use: [MiniCssExtractPlugin.loader, { + use: [CssExtractRspackPlugin.loader, { loader: 'css-loader', options: { url: true, @@ -33,13 +32,7 @@ export default { optimization: { minimize: !isDev, minimizer: [ - new CssMinimizerPlugin({ - minimizerOptions: { - preset: ['default', { - svgo: false, - }], - }, - }), + new rspack.LightningCssMinimizerRspackPlugin(), ], }, }; diff --git a/.webpack/html.js b/.rspack/html.js similarity index 100% rename from .webpack/html.js rename to .rspack/html.js diff --git a/.webpack/js.js b/.rspack/js.js similarity index 81% rename from .webpack/js.js rename to .rspack/js.js index fdc88556..fae11fc8 100644 --- a/.webpack/js.js +++ b/.rspack/js.js @@ -1,12 +1,15 @@ import {resolve, sep} from 'node:path'; +import {fileURLToPath} from 'node:url'; import {env} from 'node:process'; -import webpack from 'webpack'; -import WebpackBar from 'webpackbar'; +import {rspack} from '@rspack/core'; + +const resolveModule = (a) => fileURLToPath(import.meta.resolve(a)); const { EnvironmentPlugin, NormalModuleReplacementPlugin, -} = webpack; + ProvidePlugin, +} = rspack; const modules = './modules'; const dirModules = './client/modules'; @@ -22,27 +25,34 @@ const dist = resolve(rootDir, 'dist'); const distDev = resolve(rootDir, 'dist-dev'); const devtool = isDev ? 'eval' : 'source-map'; -const notEmpty = (a) => a; -const clean = (array) => array.filter(notEmpty); - const noParse = (a) => a.endsWith('.spec.js'); -const options = { - babelrc: true, -}; -const rules = clean([ - !isDev && { - test: /\.[mc]?js$/, +// codegen.macro is a babel-macro (build-time codegen), not supported by +// Rspack's native SWC transform, so client/sw/sw.js (the only file that +// uses it) keeps going through babel-loader. Everything else uses +// Rspack's built-in SWC loader, which is the main source of the speedup. +const rules = [ + { + test: /sw\/sw\.js$/, exclude: /node_modules/, loader: 'babel-loader', }, - isDev && { + { test: /\.[mc]?js$/, - exclude: /node_modules/, - loader: 'babel-loader', - options, + exclude: [/node_modules/, /sw\/sw\.js$/], + loader: 'builtin:swc-loader', + options: { + jsc: { + parser: { + syntax: 'ecmascript', + }, + }, + env: { + targets: 'defaults', + }, + }, }, -]); +]; const plugins = [ new NormalModuleReplacementPlugin(/^node:/, (resource) => { @@ -52,8 +62,7 @@ const plugins = [ new EnvironmentPlugin({ NODE_ENV, }), - new WebpackBar(), - new webpack.ProvidePlugin({ + new ProvidePlugin({ process: 'process/browser', }), ]; @@ -99,9 +108,9 @@ export default { 'node:path': 'path', }, fallback: { - path: import.meta.resolve('path-browserify'), - process: import.meta.resolve('process/browser'), - util: import.meta.resolve('util'), + path: resolveModule('path-browserify'), + process: resolveModule('process/browser'), + util: resolveModule('util'), }, }, devtool, @@ -156,7 +165,7 @@ export default { }, plugins, performance: { - maxEntrypointSize: 600_000, + maxEntrypointSize: 800_000, maxAssetSize: 600_000, }, }; diff --git a/package.json b/package.json index 164ec939..f680e519 100644 --- a/package.json +++ b/package.json @@ -162,6 +162,8 @@ "@cloudcmd/stub": "^5.0.0", "@iocmd/wait": "^2.1.0", "@putout/eslint-flat": "^4.0.0", + "@rspack/cli": "^2.1.4", + "@rspack/core": "^2.1.4", "@supertape/loader-css": "^1.0.0", "@types/node-fetch": "^2.6.11", "auto-globals": "^4.0.0", @@ -171,7 +173,6 @@ "clean-css-loader": "^4.2.1", "codegen.macro": "^4.0.0", "css-loader": "^7.1.2", - "css-minimizer-webpack-plugin": "^8.0.0", "css-modules-require-hook": "^4.2.3", "cssnano-preset-default": "^8.0.1", "domtokenlist-shim": "^1.2.0", @@ -190,7 +191,6 @@ "load.js": "^3.0.0", "madrun": "^13.0.0", "memfs": "^4.2.0", - "mini-css-extract-plugin": "^2.9.2", "minor": "^1.2.2", "morgan": "^1.6.1", "multi-rename": "^3.0.0", @@ -215,10 +215,7 @@ "unionfs": "^4.0.0", "url-loader": "^4.0.0", "util": "^0.12.5", - "webpack": "^5.99.9", - "webpack-cli": "^7.0.2", - "webpack-merge": "^6.0.1", - "webpackbar": "^7.0.0" + "webpack-merge": "^6.0.1" }, "imports": { "#css/": "./css/", diff --git a/rspack.config.js b/rspack.config.js new file mode 100644 index 00000000..5dcb033d --- /dev/null +++ b/rspack.config.js @@ -0,0 +1,10 @@ +import {merge} from 'webpack-merge'; +import * as htmlConfig from './.rspack/html.js'; +import cssConfig from './.rspack/css.js'; +import jsConfig from './.rspack/js.js'; + +export default merge([ + jsConfig, + htmlConfig, + cssConfig, +]);