ci: switch to rspack

terrestris · Jul 5, 2024 · d4dfbd6 · d4dfbd6
1 parent 1ba4932
commit d4dfbd6
Show file tree

Hide file tree

Showing 9 changed files with 2,406 additions and 2,804 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,19 +19,19 @@
     "dist"
   ],
   "scripts": {
-    "build": "webpack --config webpack.prod.js",
-    "build:analyze": "BUNDLE_ANALYZE=true npm run build",
+    "build": "rspack --config rspack.prod.js build",
+    "build:analyze": "npm run build -- --analyze",
     "build:babel": "BABEL_ENV=production babel src --out-dir dist --copy-files --no-copy-ignored --ignore 'src/**/*.spec.tsx' --ignore 'src/**/*.spec.js' --extensions '.ts,.tsx' --source-maps",
     "build:declaration": "tsc --emitDeclarationOnly",
     "build:dist": "npm run clean:dist && npm run build:babel && npm run build:declaration",
     "check": "npm run typecheck && npm run lint && npm run test",
-    "clean:dist": "rimraf ./dist/*",
+    "clean:dist": "rimraf ./dist/* ./build/*",
     "husky": "husky",
     "lint": "eslint -c .eslintrc.js --ext .ts,.tsx src/",
     "lint:fix": "eslint -c .eslintrc.js --ext .ts,.tsx src/ --fix",
     "prepare": "npm run husky",
     "semantic-release": "npm run clean; npm run build; npx semantic-release",
-    "start": "webpack serve --config webpack.dev.js",
+    "start": "rspack serve --config rspack.dev.js",
     "test": "jest --maxWorkers=50% --coverage",
     "tsc": "tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit -p tsconfig.json",
@@ -50,14 +50,14 @@
     "@terrestris/react-geo": "24.0.0-main.4",
     "@terrestris/react-util": "^6.0.2",
     "@terrestris/shogun-e2e-tests": "^1.0.8",
-    "antd": "^5.17.4",
-    "dotenv": "^16.4.5",
     "@terrestris/shogun-util": "^8.3.1",
+    "antd": "^5.17.4",
     "color": "^4.2.3",
+    "dotenv": "^16.4.5",
     "geostyler": "^14.1.4",
-    "i18next": "^23.11.5",
     "geostyler-openlayers-parser": "^4.3.0",
     "geostyler-style": "^8.1.0",
+    "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "js-md5": "^0.8.3",
     "keycloak-js": "^25.0.1",
@@ -80,13 +80,17 @@
     "@casualbot/jest-sonar-reporter": "^2.3.1",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@module-federation/enhanced": "^0.2.3",
     "@playwright/test": "^1.44.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
+    "@rspack/cli": "^0.7.5",
+    "@rspack/core": "^0.7.5",
+    "@rspack/plugin-react-refresh": "^0.7.5",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.0.5",
     "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^14.0.1",
+    "@swc/helpers": "^0.5.11",
     "@terrestris/eslint-config-typescript": "^5.0.0",
     "@terrestris/eslint-config-typescript-react": "^2.0.0",
     "@testing-library/jest-dom": "^6.4.5",
@@ -103,12 +107,10 @@
     "buffer": "^6.0.3",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
     "eslint": "^8.28.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.34.2",
     "fs-extra": "11.2.0",
-    "html-webpack-plugin": "^5.6.0",
     "husky": "^9.0.11",
     "ignore-loader": "^0.1.2",
     "jest": "^29.7.0",
@@ -117,16 +119,12 @@
     "less-loader": "^12.2.0",
     "mini-css-extract-plugin": "^2.9.0",
     "path-exists-cli": "2.0.0",
-    "react-refresh": "0.14.2",
+    "react-refresh": "^0.14.2",
     "semantic-release": "^23.1.1",
     "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.10",
     "typescript": "^5.4.5",
     "watch": "1.0.2",
-    "webpack": "^5.91.0",
-    "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "webpack-merge": "^6.0.1"
   },
   "publishConfig": {
     "access": "public"

diff --git a/resources/public/index.ejs → resources/template/index.ejs b/resources/public/index.ejs → resources/template/index.ejs
@@ -1,21 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, shrink-to-fit=no">
-    <% if (htmlWebpackPlugin.options.csrf && htmlWebpackPlugin.options.csrf.csrfToken &&
-      htmlWebpackPlugin.options.csrf.csrfHeader && htmlWebpackPlugin.options.csrf.csrfParameterName) { %>
-      <meta name="_csrf" content="<%= htmlWebpackPlugin.options.csrf.csrfToken %>" />
-      <meta name="_csrf_header" content="<%= htmlWebpackPlugin.options.csrf.csrfHeader %>" />
-      <meta name="_csrf_parameter_name" content="<%= htmlWebpackPlugin.options.csrf.csrfParameterName %>" />
-    <% } %>
-    <!-- TODO Check if needed -->
-    <base href="<%= htmlWebpackPlugin.options.appPrefix %>">
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
-    <div id="loadmask" class="loadmask">
-      <img id="loadmask-image" alt="Loading, please wait…">
-    </div>
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <base href="<%= appPrefix %>" />
     <style>
       .loadmask {
         position: fixed;
@@ -91,6 +77,9 @@
         loadingImageElement.src = logoPath;
       }
     </script>
+    <div id="loadmask" class="loadmask">
+      <img id="loadmask-image" alt="Loading, please wait…">
+    </div>
     <div id="app" class="app"></div>
   </body>
 </html>
diff --git a/webpack.common.js → rspack.common.js b/webpack.common.js → rspack.common.js
@@ -1,9 +1,7 @@
 const path = require('path');
 
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
-const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
+const rspack = require('@rspack/core');
 
 const deps = require('./package.json').dependencies;
 
@@ -14,34 +12,50 @@ module.exports = {
   },
   module: {
     rules: [{
-      test: /\.m?js$/,
-      include: /node_modules\/@terrestris/,
+      test: /\.m?js/,
+      type: 'javascript/auto',
       resolve: {
         fullySpecified: false
       }
     }, {
-      test: /\.tsx?$/,
-      exclude: /node_modules|\.d\.ts$/,
-      use: [{
-        loader: 'babel-loader'
-      }]
+      test: /\.(j|t)s$/,
+      exclude: [/[\\/]node_modules[\\/]/],
+      loader: 'builtin:swc-loader',
+      options: {
+        jsc: {
+          parser: {
+            syntax: 'typescript'
+          },
+          externalHelpers: true
+        },
+        env: {
+          targets: 'Chrome >= 48'
+        }
+      }
+    }, {
+      test: /\.tsx$/,
+      loader: 'builtin:swc-loader',
+      exclude: [/[\\/]node_modules[\\/]/],
+      options: {
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true
+          },
+          transform: {
+            react: {
+              runtime: 'automatic'
+            }
+          },
+          externalHelpers: true
+        },
+        env: {
+          targets: 'Chrome >= 48'
+        }
+      }
     }, {
       test: /\.d\.ts$/,
       loader: 'ignore-loader'
-    }, {
-      test: /\.less|\.css$/,
-      use: [{
-        loader: 'style-loader'
-      }, {
-        loader: 'css-loader'
-      }, {
-        loader: 'less-loader',
-        options: {
-          lessOptions: {
-            javascriptEnabled: true
-          }
-        }
-      }]
     }, {
       test: /\.(jpe?g|png|gif|ico|pdf|eot|svg|ttf|woff(2)?)$/,
       type: 'asset/resource'
@@ -55,88 +69,81 @@ module.exports = {
     extensions: [
       '.tsx',
       '.ts',
-      '.js'
+      '.js',
+      '.cjs',
+      '.mjs'
     ],
     fallback: {
       buffer: require.resolve('buffer/')
     }
   },
   output: {
     path: path.resolve(__dirname, 'build'),
+    publicPath: 'auto',
     clean: true
   },
   plugins: [
-    new HtmlWebpackPlugin({
+    new rspack.HtmlRspackPlugin({
       filename: 'index.html',
       title: 'SHOGun Client',
-      template: path.join(__dirname, 'resources', 'public', 'index.ejs'),
-      hash: true,
-      appPrefix: process.env.HTML_BASE_URL ?? '',
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeRedundantAttributes: true,
-        useShortDoctype: true,
-        removeEmptyAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        keepClosingSlash: true,
-        minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true
+      template: path.join(__dirname, 'resources', 'template', 'index.ejs'),
+      templateParameters: {
+        appPrefix: process.env.HTML_BASE_URL ?? ''
+      },
+      favicon: path.join(__dirname, 'resources', 'public', 'favicon.ico'),
+      minify: true,
+      meta: {
+        charset: 'utf-8',
+        viewport: 'user-scalable=no, width=device-width, initial-scale=1, shrink-to-fit=no'
       }
     }),
-    new CopyWebpackPlugin({
+    new rspack.CopyRspackPlugin({
       patterns: [{
         from: path.join(__dirname, 'resources', 'config', 'gis-client-config.js'),
         to: '.'
       }, {
-        from: './node_modules/monaco-editor/min/vs',
+        from: path.join(__dirname, 'node_modules', 'monaco-editor', 'min', 'vs'),
         to: 'vs'
       }]
     }),
-    new webpack.DefinePlugin({
+    new rspack.DefinePlugin({
       PROJECT_VERSION: JSON.stringify(require('./package.json').version),
       KEYCLOAK_HOST: JSON.stringify(process.env.KEYCLOAK_HOST),
       KEYCLOAK_REALM: JSON.stringify(process.env.KEYCLOAK_REALM),
       KEYCLOAK_CLIENT_ID: JSON.stringify(process.env.KEYCLOAK_CLIENT_ID)
     }),
-    new webpack.ProvidePlugin({
+    new rspack.ProvidePlugin({
       Buffer: [
         'buffer',
         'Buffer'
       ]
     }),
     new ModuleFederationPlugin({
       name: 'SHOGunGISClient',
+      dev: false,
       shared: {
         react: {
           singleton: true,
-          eager: true,
           requiredVersion: deps.react
         },
         'react-dom': {
           singleton: true,
-          eager: true,
           requiredVersion: deps['react-dom']
         },
         'react-redux': {
           singleton: true,
-          eager: true,
           requiredVersion: deps['react-redux']
         },
         '@terrestris/react-geo/': {
           singleton: true,
-          eager: true,
           requiredVersion: deps['@terrestris/react-geo']
         },
         'react-i18next': {
           singleton: true,
-          eager: true,
           requiredVersion: deps['react-i18next']
         },
         'ol/': {
           singleton: true,
-          eager: true,
           requiredVersion: deps.ol
         }
       }

diff --git a/webpack.dev.js → rspack.dev.js b/webpack.dev.js → rspack.dev.js
@@ -1,12 +1,9 @@
 const path = require('path');
 
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { merge } = require('webpack-merge');
 
-const {
-  merge
-} = require('webpack-merge');
-
-const common = require('./webpack.common.js');
+const common = require('./rspack.common.js');
 
 module.exports = merge(common, {
   mode: 'development',
@@ -21,7 +18,21 @@ module.exports = merge(common, {
     hot: true,
     static: path.join(__dirname, 'resources', 'public')
   },
+  module: {
+    rules: [{
+      test: /\.less$/,
+      type: 'css',
+      use: [{
+        loader: 'less-loader',
+        options: {
+          lessOptions: {
+            javascriptEnabled: true
+          }
+        }
+      }]
+    }]
+  },
   plugins: [
-    new ReactRefreshWebpackPlugin()
+    new ReactRefreshPlugin()
   ]
 });