comprehensive demo test chrome tools

comprehensive-demo-react18/app-01/package.json

@@ -27,7 +27,7 @@
  "legacy:start": "webpack",
  "dev": "rspack serve",
  "legacy:dev": "webpack serve --port=3001",
- "serve": "serve dist -p 3001",
+ "serve": "serve dist -p 3001 --cors",
  "clean": "rm -rf dist"
  },
  "devDependencies": {
@@ -39,4 +39,4 @@
  "raw-loader": "4.0.2",
  "react-refresh": "^0.14.0"
  }
-}
+}

comprehensive-demo-react18/app-01/rspack.config.js

@@ -1,7 +1,7 @@
 const {
- container: { ModuleFederationPlugin },
  HtmlRspackPlugin,
 } = require('@rspack/core');
+const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack')
 const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
 const ReactRefreshWebpackPlugin = require('@rspack/plugin-react-refresh');
 
@@ -19,7 +19,7 @@ module.exports = {
  minimize: false,
  },
  output: {
- publicPath: 'auto',
+ publicPath: 'http://localhost:3001/',
  uniqueName: 'app1'
  },
  experiments: {
@@ -69,10 +69,10 @@ module.exports = {
  name: 'app_01',
  filename: 'remoteEntry.js',
  remotes: {
- app_02: 'app_02@http://localhost:3002/remoteEntry.js',
- app_03: 'app_03@http://localhost:3003/remoteEntry.js',
- app_04: 'app_04@http://localhost:3004/remoteEntry.js',
- app_05: 'app_05@http://localhost:3005/remoteEntry.js',
+ app_02: 'app_02@http://localhost:3002/mf-manifest.json',
+ app_03: 'app_03@http://localhost:3003/mf-manifest.json',
+ app_04: 'app_04@http://localhost:3004/mf-manifest.json',
+ app_05: 'app_05@http://localhost:3005/mf-manifest.json',
  },
  exposes: {
  './SideNav': './src/SideNav',
@@ -98,6 +98,5 @@ module.exports = {
  template: './public/index.html',
  }),
  isProd ? new ReactRefreshWebpackPlugin() : undefined,
- // new RsdoctorRspackPlugin()
- ],
+ ].filter(Boolean),
 };

comprehensive-demo-react18/app-01/webpack.config.js

@@ -70,10 +70,10 @@ module.exports = {
  name: 'app_01',
  filename: 'remoteEntry.js',
  remotes: {
- app_02: 'app_02@http://localhost:3002/remoteEntry.js',
- app_03: 'app_03@http://localhost:3003/remoteEntry.js',
- app_04: 'app_04@http://localhost:3004/remoteEntry.js',
- app_05: 'app_05@http://localhost:3005/remoteEntry.js',
+ app_02: 'app_02@http://localhost:3002/mf-manifest.json',
+ app_03: 'app_03@http://localhost:3003/mf-manifest.json',
+ app_04: 'app_04@http://localhost:3004/mf-manifest.json',
+ app_05: 'app_05@http://localhost:3005/mf-manifest.json',
  },
  exposes: {
  './SideNav': './src/SideNav',

comprehensive-demo-react18/app-02/package.json

@@ -31,7 +31,7 @@
  "legacy:start": "webpack --watch",
  "dev": "rspack serve",
  "legacy:dev": "webpack serve --port=3002",
- "serve": "serve dist -p 3002",
+ "serve": "serve dist -p 3002 --cors",
  "clean": "rm -rf dist"
  }
-}
+}

comprehensive-demo-react18/app-02/rspack.config.js

@@ -1,7 +1,7 @@
 const {
- container: { ModuleFederationPlugin },
  HtmlRspackPlugin,
 } = require('@rspack/core');
+const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack')
 const deps = require('./package.json').dependencies;
 const ReactRefreshWebpackPlugin = require('@rspack/plugin-react-refresh');
 const isProd = process.env.NODE_ENV === 'production'
@@ -27,7 +27,7 @@ module.exports = {
  }
  },
  output: {
- publicPath: 'auto',
+ publicPath: 'http://localhost:3002/',
  uniqueName: 'app2'
  },
 
@@ -68,8 +68,8 @@ module.exports = {
  name: 'app_02',
  filename: 'remoteEntry.js',
  remotes: {
- app_01: 'app_01@http://localhost:3001/remoteEntry.js',
- app_03: 'app_03@http://localhost:3003/remoteEntry.js',
+ app_01: 'app_01@http://localhost:3001/mf-manifest.json',
+ app_03: 'app_03@http://localhost:3003/mf-manifest.json',
  },
  exposes: {
  './Dialog': './src/Dialog',

comprehensive-demo-react18/app-02/webpack.config.js

@@ -66,8 +66,8 @@ module.exports = {
  name: 'app_02',
  filename: 'remoteEntry.js',
  remotes: {
- app_01: 'app_01@http://localhost:3001/remoteEntry.js',
- app_03: 'app_03@http://localhost:3003/remoteEntry.js',
+ app_01: 'app_01@http://localhost:3001/mf-manifest.json',
+ app_03: 'app_03@http://localhost:3003/mf-manifest.json',
  },
  exposes: {
  './Dialog': './src/Dialog',

comprehensive-demo-react18/app-03/package.json

@@ -26,11 +26,11 @@
  "legacy:start": "webpack --watch",
  "dev": "rspack serve",
  "legacy:dev": "webpack serve --port=3003",
- "serve": "serve dist -p 3003",
+ "serve": "serve dist -p 3003 --cors",
  "clean": "rm -rf dist"
  },
  "devDependencies": {
  "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
  "react-refresh": "^0.14.0"
  }
-}
+}

comprehensive-demo-react18/app-03/rspack.config.js

@@ -1,7 +1,7 @@
 const {
- container: {ModuleFederationPlugin},
  HtmlRspackPlugin,
 } = require('@rspack/core');
+const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack')
 const isProd = process.env.NODE_ENV === 'production'
 
 module.exports = {
@@ -25,7 +25,7 @@ module.exports = {
  extensions: ['.jsx', '.js', '.json', '.mjs'],
  },
  output: {
- publicPath: 'auto',
+ publicPath: 'http://localhost:3003/',
  uniqueName: 'app3'
  },
 
@@ -60,7 +60,7 @@ module.exports = {
  name: 'app_03',
  filename: 'remoteEntry.js',
  remotes: {
- app_01: 'app_01@http://localhost:3001/remoteEntry.js',
+ app_01: 'app_01@http://localhost:3001/mf-manifest.json',
  },
  exposes: {
  './Button': './src/Button',

comprehensive-demo-react18/app-03/webpack.config.js

@@ -60,7 +60,7 @@ module.exports = {
  name: 'app_03',
  filename: 'remoteEntry.js',
  remotes: {
- app_01: 'app_01@http://localhost:3001/remoteEntry.js',
+ app_01: 'app_01@http://localhost:3001/mf-manifest.json',
  },
  exposes: {
  './Button': './src/Button',

comprehensive-demo-react18/app-04/package.json

@@ -29,7 +29,7 @@
  "legacy:start": "webpack --watch",
  "dev": "rspack serve",
  "legacy:dev": "webpack serve --port=3004",
- "serve": "serve public -p 3004",
+ "serve": "serve public -p 3004 --cors",
  "clean": "rm -rf dist"
  }
-}
+}

comprehensive-demo-react18/app-04/rspack.config.js

@@ -1,6 +1,6 @@
 const {
- container: {ModuleFederationPlugin},
 } = require('@rspack/core');
+const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack')
 const path = require('path');
 
 const mode = process.env.NODE_ENV || 'development';
@@ -19,7 +19,7 @@ module.exports = {
  path: path.resolve(__dirname, 'public'),
  filename: '[name].js',
  chunkFilename: '[name].[id].js',
- publicPath: 'auto',
+ publicPath: 'http://localhost:3004/',
  uniqueName: 'app4'
  },
  devServer: {

comprehensive-demo-react18/app-05/package.json

@@ -10,7 +10,7 @@
  "legacy:start": "webpack --watch",
  "dev": "rspack serve",
  "legacy:dev": "webpack serve --port=3005",
- "serve": "serve public -p 3005",
+ "serve": "serve public -p 3005 --cors",
  "clean": "rm -rf dist"
  },
  "devDependencies": {
@@ -30,4 +30,4 @@
  "webpack-cli": "5.1.4",
  "webpack-dev-server": "4.15.1"
  }
-}
+}

comprehensive-demo-react18/app-05/rspack.config.js

@@ -1,7 +1,7 @@
 const {
  HtmlRspackPlugin,
- container: { ModuleFederationPlugin },
 } = require('@rspack/core');
+const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack')
 const mode = process.env.NODE_ENV || 'development';
 const isProd = process.env.NODE_ENV === 'production'
 
@@ -71,7 +71,7 @@ module.exports = {
  path: __dirname + '/public',
  filename: '[name].js',
  chunkFilename: '[name].[id].js',
- publicPath: 'auto',
+ publicPath: 'http://localhost:3005/',
  uniqueName: 'app5'
  },
  mode,