Split webpack config into dev and prod files.

bi-directional-amplify/app1/config/webpack.common.js

@@ -0,0 +1,21 @@
+module.exports = {
+  entry: "./src/index",
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false
+        }
+      },
+    ],
+  },
+  resolve: {
+    modules: ['node_modules']
+  },
+};

bi-directional-amplify/app1/webpack.config.js → bi-directional-amplify/app1/config/webpack.dev.js

@@ -1,51 +1,23 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { merge } = require('webpack-merge');
 const { ModuleFederationPlugin } = require("webpack").container;
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const commonConfig = require('./webpack.common');
 
 const path = require("path");
-const deps = require("./package.json").dependencies;
-module.exports = {
-  entry: "./src/index",
+const deps = require("../package.json").dependencies;
+
+const devConfig = {
   mode: "development",
   devServer: {
     contentBase: path.join(__dirname, "dist"),
     port: 3001,
   },
-  output: {
-    publicPath: "http://localhost:3001/",
-  },
-  module: {
-    rules: [
-      // {
-      //   test: /\.(js|mjs|jsx|ts|tsx)$/,
-      //   loader: "babel-loader",
-      //   exclude: /node_modules/,
-      //   options: {
-      //     presets: ["@babel/preset-react"],
-      //   },
-      // },
-      {
-        test: /\.(js|jsx|ts|tsx)$/,
-        exclude: /node_modules/,
-        use: ['babel-loader'],
-      },
-      {
-        test: /\.m?js/,
-        resolve: {
-          fullySpecified: false
-        }
-      },
-    ],
-  },
-  resolve: {
-    modules: ['node_modules']
-  },
   plugins: [
     new ModuleFederationPlugin({
       name: "app1",
       filename: "remoteEntry.js",
       remotes: {
-        // app2: "app2@https://d3tlpbej7bbuwi.cloudfront.net/remoteEntry.js",
         app2: "app2@http://localhost:3002/remoteEntry.js",
       },
       exposes: {
@@ -74,3 +46,5 @@ module.exports = {
     new CleanWebpackPlugin(),
   ],
 };
+
+module.exports = merge(commonConfig, devConfig);

bi-directional-amplify/app1/config/webpack.prod.js

@@ -0,0 +1,41 @@
+const { merge } = require('webpack-merge');
+const { ModuleFederationPlugin } = require("webpack").container;
+const commonConfig = require('./webpack.common');
+const deps = require("../package.json").dependencies;
+
+const prodConfig = {
+  mode: "production",
+  output: {
+    filename: "[name].[contenthash].js",
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "app1",
+      filename: "remoteEntry.js",
+      remotes: {
+        app2: "app2@https://d3tlpbej7bbuwi.cloudfront.net/remoteEntry.js",
+      },
+      exposes: {
+        "./Button": "./src/Button",
+      },
+      // sharing code based on the installed version, to allow for multiple vendors with different versions
+      shared: [
+        {
+          ...deps,
+          react: {
+            // eager: true,
+            singleton: true,
+            requiredVersion: deps.react,
+          },
+          "react-dom": {
+            // eager: true,
+            singleton: true,
+            requiredVersion: deps["react-dom"],
+          }
+        },
+      ],
+    }),
+  ],
+};
+
+module.exports = merge(commonConfig, prodConfig);

bi-directional-amplify/app1/package.json

@@ -13,11 +13,12 @@
     "serve": "11.3.2",
     "webpack": "5.9.0",
     "webpack-cli": "4.2.0",
-    "webpack-dev-server": "3.11.0"
+    "webpack-dev-server": "3.11.0",
+    "webpack-merge": "^5.4.0"
   },
   "scripts": {
-    "start": "webpack-cli serve",
-    "build": "webpack --mode production",
+    "start": "webpack-cli serve -c ./config/webpack.dev.js",
+    "build": "webpack --mode production -c ./config/webpack.prod.js",
     "serve": "serve dist -p 3001",
     "clean": "rm -rf dist"
   },

bi-directional-amplify/app2/config/webpack.common.js

@@ -0,0 +1,21 @@
+module.exports = {
+  entry: "./src/index",
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false
+        }
+      },
+    ],
+  },
+  resolve: {
+    modules: ['node_modules']
+  },
+};

bi-directional-amplify/app2/webpack.config.js → bi-directional-amplify/app2/config/webpack.dev.js

@@ -1,52 +1,30 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { merge } = require('webpack-merge');
 const { ModuleFederationPlugin } = require("webpack").container;
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const commonConfig = require('./webpack.common');
+
 const path = require("path");
-const deps = require("./package.json").dependencies;
-module.exports = {
-  entry: "./src/index",
+const deps = require("../package.json").dependencies;
+
+const devConfig = {
   mode: "development",
   devServer: {
     contentBase: path.join(__dirname, "dist"),
     port: 3002,
   },
-  output: {
-    path: path.resolve(process.cwd(), 'dist'),
-    publicPath: "http://localhost:3002/",
-    // publicPath: "https://d3tlpbej7bbuwi.cloudfront.net/",
-    // publicPath: 'auto',
-    // publicPath: '/',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx|ts|tsx)$/,
-        exclude: /node_modules/,
-        use: ['babel-loader'],
-      },
-      {
-        test: /\.m?js/,
-        resolve: {
-          fullySpecified: false
-        }
-      },
-    ],
-  },
-  resolve: {
-    modules: ['node_modules']
-  },
   plugins: [
     new ModuleFederationPlugin({
       name: "app2",
       filename: "remoteEntry.js",
       remotes: {
-        app1: "app1@https://d24jcvf7ms0hac.cloudfront.net/remoteEntry.js",
-        // app1: "app1@http://localhost:3001/remoteEntry.js",
+        app1: "app1@http://localhost:3001/remoteEntry.js",
       },
       exposes: {
         "./Button": "./src/Button",
-        "./App": "./src/App"
+        "./App": "./src/App",
       },
+      // sharing code based on the installed version, to allow for multiple vendors with different versions
       shared: [
         {
           ...deps,
@@ -69,3 +47,5 @@ module.exports = {
     new CleanWebpackPlugin(),
   ],
 };
+
+module.exports = merge(commonConfig, devConfig);

bi-directional-amplify/app2/config/webpack.prod.js

@@ -0,0 +1,42 @@
+const { merge } = require('webpack-merge');
+const { ModuleFederationPlugin } = require("webpack").container;
+const commonConfig = require('./webpack.common');
+const deps = require("../package.json").dependencies;
+
+const prodConfig = {
+  mode: "production",
+  output: {
+    filename: "[name].[contenthash].js",
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "app2",
+      filename: "remoteEntry.js",
+      remotes: {
+        app1: "app1@https://d24jcvf7ms0hac.cloudfront.net/remoteEntry.js",
+      },
+      exposes: {
+        "./Button": "./src/Button",
+        "./App": "./src/App",
+      },
+      // sharing code based on the installed version, to allow for multiple vendors with different versions
+      shared: [
+        {
+          ...deps,
+          react: {
+            // eager: true,
+            singleton: true,
+            requiredVersion: deps.react,
+          },
+          "react-dom": {
+            // eager: true,
+            singleton: true,
+            requiredVersion: deps["react-dom"],
+          }
+        },
+      ],
+    }),
+  ],
+};
+
+module.exports = merge(commonConfig, prodConfig);