Web: Login: add webpack expose

web/ASC.Web.Login/webpack.config.js

@@ -1,32 +1,33 @@
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
-const ExternalTemplateRemotesPlugin = require('external-remotes-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const combineUrl = require('@appserver/common/utils/combineUrl');
-const AppServerConfig = require('@appserver/common/constants/AppServerConfig');
-const sharedDeps = require('@appserver/common/constants/sharedDependencies');
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const ModuleFederationPlugin = require("webpack").container
+  .ModuleFederationPlugin;
+const ExternalTemplateRemotesPlugin = require("external-remotes-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const combineUrl = require("@appserver/common/utils/combineUrl");
+const AppServerConfig = require("@appserver/common/constants/AppServerConfig");
+const sharedDeps = require("@appserver/common/constants/sharedDependencies");
 
 const { proxyURL } = AppServerConfig;
 
-const path = require('path');
-const pkg = require('./package.json');
+const path = require("path");
+const pkg = require("./package.json");
 const deps = pkg.dependencies || {};
 const homepage = pkg.homepage; // combineUrl(proxyURL, pkg.homepage);
 const title = pkg.title;
 
 var config = {
-  entry: './src/index',
-  target: 'web',
-  mode: 'development',
+  entry: "./src/index",
+  target: "web",
+  mode: "development",
 
   devServer: {
     devMiddleware: {
       publicPath: homepage,
     },
     static: {
-      directory: path.join(__dirname, 'dist'),
+      directory: path.join(__dirname, "dist"),
       publicPath: homepage,
     },
 
@@ -39,22 +40,23 @@ var config = {
     },
     hot: false,
     headers: {
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
-      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+      "Access-Control-Allow-Headers":
+        "X-Requested-With, content-type, Authorization",
     },
   },
 
   output: {
-    publicPath: 'auto',
-    chunkFilename: 'static/js/[id].[contenthash].js',
+    publicPath: "auto",
+    chunkFilename: "static/js/[id].[contenthash].js",
     //assetModuleFilename: "static/images/[hash][ext][query]",
-    path: path.resolve(process.cwd(), 'dist'),
-    filename: 'static/js/[name].[contenthash].bundle.js',
+    path: path.resolve(process.cwd(), "dist"),
+    filename: "static/js/[name].[contenthash].bundle.js",
   },
 
   resolve: {
-    extensions: ['.jsx', '.js', '.json'],
+    extensions: [".jsx", ".js", ".json"],
     fallback: {
       crypto: false,
     },
@@ -69,14 +71,14 @@ var config = {
     rules: [
       {
         test: /\.(png|jpe?g|gif|ico)$/i,
-        type: 'asset/resource',
+        type: "asset/resource",
         generator: {
-          filename: 'static/images/[hash][ext][query]',
+          filename: "static/images/[hash][ext][query]",
         },
       },
       {
         test: /\.m?js/,
-        type: 'javascript/auto',
+        type: "javascript/auto",
         resolve: {
           fullySpecified: false,
         },
@@ -85,7 +87,7 @@ var config = {
         test: /\.react.svg$/,
         use: [
           {
-            loader: '@svgr/webpack',
+            loader: "@svgr/webpack",
             options: {
               svgoConfig: {
                 plugins: [{ removeViewBox: false }],
@@ -94,26 +96,26 @@ var config = {
           },
         ],
       },
-      { test: /\.json$/, loader: 'json-loader' },
+      { test: /\.json$/, loader: "json-loader" },
       {
         test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
+        use: ["style-loader", "css-loader"],
       },
       {
         test: /\.s[ac]ss$/i,
         use: [
           // Creates `style` nodes from JS strings
-          'style-loader',
+          "style-loader",
           // Translates CSS into CommonJS
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
               url: {
                 filter: (url, resourcePath) => {
                   // resourcePath - path to css file
 
                   // Don't handle `/static` urls
-                  if (url.startsWith('/static') || url.startsWith('data:')) {
+                  if (url.startsWith("/static") || url.startsWith("data:")) {
                     return false;
                   }
 
@@ -123,7 +125,7 @@ var config = {
             },
           },
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
       },
 
@@ -132,17 +134,17 @@ var config = {
         exclude: /node_modules/,
         use: [
           {
-            loader: 'babel-loader',
+            loader: "babel-loader",
             options: {
-              presets: ['@babel/preset-react', '@babel/preset-env'],
+              presets: ["@babel/preset-react", "@babel/preset-env"],
               plugins: [
-                '@babel/plugin-transform-runtime',
-                '@babel/plugin-proposal-class-properties',
-                '@babel/plugin-proposal-export-default-from',
+                "@babel/plugin-transform-runtime",
+                "@babel/plugin-proposal-class-properties",
+                "@babel/plugin-proposal-export-default-from",
               ],
             },
           },
-          'source-map-loader',
+          "source-map-loader",
         ],
       },
     ],
@@ -151,13 +153,14 @@ var config = {
   plugins: [
     new CleanWebpackPlugin(),
     new ModuleFederationPlugin({
-      name: 'login',
-      filename: 'remoteEntry.js',
+      name: "login",
+      filename: "remoteEntry.js",
       remotes: {
-        studio: `studio@${combineUrl(proxyURL, '/remoteEntry.js')}`,
+        studio: `studio@${combineUrl(proxyURL, "/remoteEntry.js")}`,
       },
       exposes: {
-        './app': './src/Login.jsx',
+        "./login": "./src/Login.jsx",
+        "./roomsLogin": "./src/RoomsLogin.jsx",
       },
       shared: {
         ...deps,
@@ -166,7 +169,7 @@ var config = {
     }),
     new ExternalTemplateRemotesPlugin(),
     new HtmlWebpackPlugin({
-      template: './public/index.html',
+      template: "./public/index.html",
       publicPath: homepage,
       title: title,
       // templateParameters: {
@@ -177,11 +180,11 @@ var config = {
     new CopyPlugin({
       patterns: [
         {
-          from: 'public',
+          from: "public",
           globOptions: {
             dot: true,
             gitignore: true,
-            ignore: ['**/index.html'],
+            ignore: ["**/index.html"],
           },
         },
       ],
@@ -190,15 +193,15 @@ var config = {
 };
 
 module.exports = (env, argv) => {
-  if (argv.mode === 'production') {
-    config.mode = 'production';
+  if (argv.mode === "production") {
+    config.mode = "production";
     config.optimization = {
-      splitChunks: { chunks: 'all' },
+      splitChunks: { chunks: "all" },
       minimize: !env.minimize,
       minimizer: [new TerserPlugin()],
     };
   } else {
-    config.devtool = 'cheap-module-source-map';
+    config.devtool = "cheap-module-source-map";
   }
 
   return config;