Migrated graphql package from webpack to rspack

packages/amplify-graphiql-explorer/config/webpack.config.js → packages/amplify-graphiql-explorer/config/rspack.config.js

@@ -1,19 +1,16 @@
 const fs = require('fs');
 const path = require('path');
-const webpack = require('webpack');
+const rspack = require("@rspack/core");
 const resolve = require('resolve');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const { RspackManifestPlugin } = require("rspack-manifest-plugin");
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const WorkboxWebpackPlugin = require("@aaroon/workbox-rspack-plugin");
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const ESLintPlugin = require('eslint-webpack-plugin');
+const ESLintPlugin = require("eslint-rspack-plugin");
 const paths = require('./paths');
 const modules = require('./modules');
 const getClientEnvironment = require('./env');
@@ -97,7 +94,7 @@ module.exports = function (webpackEnv) {
     const loaders = [
       isEnvDevelopment && require.resolve('style-loader'),
       isEnvProduction && {
-        loader: MiniCssExtractPlugin.loader,
+        loader: rspack.CssExtractRspackPlugin.loader,
         // css is located in `static/css`, use '../../' to locate index.html folder
         // in production `paths.publicUrlOrPath` can be a relative path
         options: paths.publicUrlOrPath.startsWith('.') ? { publicPath: '../../' } : {},
@@ -219,7 +216,7 @@ module.exports = function (webpackEnv) {
       minimize: isEnvProduction,
       minimizer: [
         // This is only used in production mode
-        new TerserPlugin({
+        new rspack.SwcJsMinimizerRspackPlugin({
           terserOptions: {
             parse: {
               // We want terser to parse ecma 8 code. However, we don't want it
@@ -258,8 +255,7 @@ module.exports = function (webpackEnv) {
             },
           },
         }),
-        // This is only used in production mode
-        new CssMinimizerPlugin(),
+        new rspack.LightningCssMinimizerRspackPlugin(options),
       ],
     },
     resolve: {
@@ -516,14 +512,14 @@ module.exports = function (webpackEnv) {
       ].filter(Boolean),
     },
     plugins: [
-      new webpack.ProvidePlugin({
+      new rspack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
       }),
-      new webpack.ProvidePlugin({
+      new rspack.ProvidePlugin({
         process: 'process/browser',
       }),
       // Generates an `index.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
+      new rspack.HtmlRspackPlugin(
         Object.assign(
           {},
           {
@@ -566,7 +562,7 @@ module.exports = function (webpackEnv) {
       // It is absolutely essential that NODE_ENV is set to production
       // during a production build.
       // Otherwise React will be compiled in the very slow development mode.
-      new webpack.DefinePlugin(env.stringified),
+      new rspack.DefinePlugin(env.stringified),
       // Experimental hot reloading for React .
       // https://github.com/facebook/react/tree/main/packages/react-refresh
       isEnvDevelopment &&
@@ -579,7 +575,7 @@ module.exports = function (webpackEnv) {
       // See https://github.com/facebook/create-react-app/issues/240
       isEnvDevelopment && new CaseSensitivePathsPlugin(),
       isEnvProduction &&
-        new MiniCssExtractPlugin({
+        new rspack.CssExtractRspackPlugin({
           // Options similar to the same options in webpackOptions.output
           // both options are optional
           filename: 'static/css/[name].[contenthash:8].css',
@@ -591,7 +587,7 @@ module.exports = function (webpackEnv) {
       //   `index.html`
       // - "entrypoints" key: Array of files which are included in `index.html`,
       //   can be used to reconstruct the HTML if necessary
-      new WebpackManifestPlugin({
+      new RspackManifestPlugin({
         fileName: 'asset-manifest.json',
         publicPath: paths.publicUrlOrPath,
         generate: (seed, files, entrypoints) => {
@@ -612,7 +608,7 @@ module.exports = function (webpackEnv) {
       // solution that requires the user to opt into importing specific locales.
       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
       // You can remove this if you don't use Moment.js:
-      new webpack.IgnorePlugin({
+      new rspack.IgnorePlugin({
         resourceRegExp: /^\.\/locale$/,
         contextRegExp: /moment$/,
       }),

packages/amplify-graphiql-explorer/package.json

@@ -69,7 +69,12 @@
     "webpack": "^5.64.4",
     "webpack-dev-server": "^4.15.2",
     "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1"
+    "workbox-webpack-plugin": "^6.4.1",
+    "@rspack/dev-server" : "^1.0.9",
+    "@rspack/core": "^1.0.14",
+    "eslint-rspack-plugin": "^4.2.1",
+    "@aaroon/workbox-rspack-plugin" : "^0.3.2",
+    "rspack-manifest-plugin" : "^5.0.1"
   },
   "devDependencies": {
     "@semantic-ui-react/css-patch": "^1.0.0",

packages/amplify-graphiql-explorer/scripts/build.js

@@ -16,8 +16,8 @@ const path = require('path');
 const chalk = require('react-dev-utils/chalk');
 const fs = require('fs-extra');
 const bfj = require('bfj');
-const webpack = require('webpack');
-const configFactory = require('../config/webpack.config');
+const rspack = require("@rspack/core");
+const configFactory = require('../config/rspack.config');
 const paths = require('../config/paths');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
@@ -49,6 +49,7 @@ const config = configFactory('production');
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
 const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+const rspackConfig = require('../config/rspack.config');
 checkBrowsers(paths.appPath, isInteractive)
   .then(() => {
     // First, read the current file sizes in build directory.
@@ -108,7 +109,7 @@ checkBrowsers(paths.appPath, isInteractive)
 function build(previousFileSizes) {
   console.log('Creating an optimized production build...');
 
-  const compiler = webpack(config);
+  const compiler = rspack(config);
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
       let messages;

packages/amplify-graphiql-explorer/scripts/start.js

@@ -14,15 +14,15 @@ require('../config/env');
 
 const fs = require('fs');
 const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
+const rspack = require("@rspack/core");
+import { RspackDevServer } from "@rspack/dev-server";
 const clearConsole = require('react-dev-utils/clearConsole');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const { choosePort, createCompiler, prepareProxy, prepareUrls } = require('react-dev-utils/WebpackDevServerUtils');
 const openBrowser = require('react-dev-utils/openBrowser');
 const semver = require('semver');
 const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
+const configFactory = require('../config/rspack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
 const getClientEnvironment = require('../config/env');
 const react = require(require.resolve('react', { paths: [paths.appPath] }));
@@ -75,7 +75,7 @@ checkBrowsers(paths.appPath, isInteractive)
       urls,
       useYarn,
       useTypeScript,
-      webpack,
+      rspack,
     });
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
@@ -86,7 +86,7 @@ checkBrowsers(paths.appPath, isInteractive)
       host: HOST,
       port,
     };
-    const devServer = new WebpackDevServer(serverConfig, compiler);
+    const devServer = new RspackDevServer(serverConfig, compiler);
     // Launch WebpackDevServer.
     devServer.startCallback(() => {
       if (isInteractive) {