Converts webpack to rspack

.github/workflows/build-check.yml

@@ -13,7 +13,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "16.x"
+          node-version: "18.x"
 
       - name: Copy dist/index.js
         run: |

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist/stats.json
 
 # misc
 .DS_Store

CHANGELOG.md

@@ -13,7 +13,9 @@ How to verify the signature: https://docs.near.org/build/web3-apps/backend/#3-ve
 - Add get/set methods for `window.location.hash`. `Set` method only accepts an empty string as a value.
 
 - Allow the wallet selector to connect to an extra contract besides `config.contractName`. To enable this feature, pass the allowExternalContract flag to the config parameter of initNear, e.g. `initNear({networkId, selector, config: { allowExternalContract: 'hello.near-examples.near' }} )`
-
+
+- Use [rspack](https://rspack.dev/) for build and bundle rather than webpack
+- Replace unsupported node-sass packages with recent packages and versions
 
 ## 2.6.1
 

config/presets/loadPreset.js

@@ -5,7 +5,7 @@ const loadPresets = (env = { presets: [] }) => {
   /** @type {string[]} */
   const mergedPresets = [].concat(...[presets]);
   const mergedConfigs = mergedPresets.map((presetName) =>
-    require(`./webpack.${presetName}.js`)(env)
+    require(`./rspack.${presetName}.js`)(env)
   );
 
   return merge({}, ...mergedConfigs);

config/webpack.development.js → config/rspack.development.js

@@ -1,5 +1,5 @@
 const path = require("path");
-const { HotModuleReplacementPlugin } = require("webpack");
+const { HotModuleReplacementPlugin } = require("@rspack/core");
 
 module.exports = () => ({
   devtool: false,

config/webpack.production.js → config/rspack.production.js

@@ -1,25 +1,10 @@
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
-const path = require("path");
+const rspack = require("@rspack/core")
 
 module.exports = () => {
   return {
-    // output: {
-    //   path: path.resolve(__dirname, "../dist"),
-    //   publicPath: "./",
-    //   // filename: "[name].[contenthash].bundle.js",
-    //   filename: "index.js",
-    // },
     devtool: false,
     module: {
       rules: [
-        // {
-        //   test: /\.(css)$/,
-        //   use: [MiniCssExtractPlugin.loader, "css-loader"],
-        //   //   options: {
-        //   //     sourceMap: false,
-        //   //   },
-        // },
         {
           test: /\.(scss|css)$/,
           use: [
@@ -54,17 +39,14 @@ module.exports = () => {
       ],
     },
     plugins: [
-      new MiniCssExtractPlugin({
+      new rspack.CssExtractRspackPlugin({
         filename: "styles/[name].[contenthash].css",
         chunkFilename: "[id].css",
-      }),
+      })
     ],
     optimization: {
       minimize: true,
-      minimizer: [new CssMinimizerPlugin(), "..."],
-      // runtimeChunk: {
-      //   name: "runtime",
-      // },
+      minimizer: [new rspack.LightningCssMinimizerRspackPlugin(), "..."],
     },
     performance: {
       hints: false,

package.json

@@ -66,35 +66,24 @@
     "tweetnacl": "^1.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "babel-loader": "^9.1.2",
+    "@rspack/cli": "^1.0.0",
+    "@rspack/core": "^1.0.0",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^9.0.1",
     "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.0",
-    "css-loader": "^6.2.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
-    "html-webpack-plugin": "^5.3.2",
+    "css-loader": "^7.1.2",
     "https-browserify": "^1.0.0",
-    "mini-css-extract-plugin": "^2.2.2",
     "near-api-js": "^2.1.3",
-    "node-sass": "^7.0.3",
     "os-browserify": "^0.3.0",
-    "postcss-loader": "^7.0.1",
+    "postcss-loader": "^8.1.1",
     "process": "^0.11.10",
-    "sass-loader": "^13.1.0",
+    "sass": "^1.77.2",
+    "sass-loader": "^14.2.1",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "style-loader": "^3.2.1",
     "url": "^0.11.0",
-    "webpack": "^5.52.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.1.0",
-    "webpack-manifest-plugin": "^5.0.0",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0"
   },
@@ -104,8 +93,10 @@
     "react-dom": "^18.2.0"
   },
   "scripts": {
-    "webpack": "webpack",
-    "prod": "npm run webpack -- --env mode=production",
+    "rspack": "rspack",
+    "dev": "npm run rspack build -- --env mode=development",
+    "prod": "npm run rspack build -- --env mode=production",
+    "prod:analyze": "npm run prod -- --analyze",
     "build": "npm run prod"
   },
   "eslintConfig": {

webpack.config.js → rspack.config.js

@@ -1,10 +1,10 @@
-const webpack = require("webpack");
+const rspack = require("@rspack/core");
 const paths = require("./config/paths");
 const path = require("path");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const { merge } = require("webpack-merge");
 const loadPreset = require("./config/presets/loadPreset");
-const loadConfig = (mode) => require(`./config/webpack.${mode}.js`)(mode);
+const loadConfig = (mode) => require(`./config/rspack.${mode}.js`)(mode);
 const nodeExternals = require("webpack-node-externals");
 
 module.exports = function (env) {
@@ -44,9 +44,22 @@ module.exports = function (env) {
             },
           },
           {
-            test: /\.js$/,
-            use: ["babel-loader"],
-            exclude: path.resolve(__dirname, "node_modules"),
+            test: /\.(j|t)s$/,
+            exclude: [/[\\/]node_modules[\\/]/],
+            loader: "builtin:swc-loader",
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'ecmascript',
+                  jsx: true,
+                },
+                externalHelpers: true,
+              },
+              env: {
+                targets: "Chrome >= 48",
+              },
+            },
+            type: 'javascript/auto',
           },
           // Images: Copy image files to build folder
           { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },
@@ -65,13 +78,9 @@ module.exports = function (env) {
       },
       target: "node",
       plugins: [
-        // new webpack.EnvironmentPlugin({
-        //   // Configure environment variables here.
-        //   ENVIRONMENT: "browser",
-        // }),
         new CleanWebpackPlugin(),
-        new webpack.ProgressPlugin(),
-        new webpack.ProvidePlugin({
+        new rspack.ProgressPlugin(),
+        new rspack.ProvidePlugin({
           process: "process/browser",
           Buffer: [require.resolve("buffer/"), "Buffer"],
         }),