0

**I have two single-spa projects (root-config, app-hello) and I need to create a build so that the file name is the same in both root-config and app-hello. The problem is that when I run the proteins separately in the build I get different dates in the file name and for this I am looking for a way to build them together **

Webpack app-hello

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const Dotenv = require('dotenv-webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const singleSpaDefaults = require('webpack-config-single-spa-react');
const override = require('./config-overrides.js');

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: 'app',
    projectName: 'hello',
    webpackConfigEnv,
    argv,
    override,
  });

  return merge(defaultConfig, {
    resolve: {
      extensions: ['.ts', '.tsx', '.js'],
      preferRelative: true,
      alias: {
        containers: path.resolve(__dirname, 'src/containers'),
        components: path.resolve(__dirname, 'src/components'),
        layouts: path.resolve(__dirname, 'src/layouts'),
        stores: path.resolve(__dirname, 'src/stores'),
        hooks: path.join(__dirname, 'src/hooks'),
        context: path.join(__dirname, 'src/context'),
        assets: path.join(__dirname, 'src/assets'),
        helpers: path.join(__dirname, 'src/helpers'),
      },
      plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })],
    },
    devServer: {
      port: 8500,
    },
    plugins: [
      new Dotenv({
        path: './.env.development',
      }),
      new FilterWarningsPlugin({
        exclude:
          /There are multiple modules with names that only differ in casing/,
      }),
      new CleanWebpackPlugin(),
    ],
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: `app-chat-${Date.now()}.js`,
      assetModuleFilename: 'assets/[name][ext]',
    },
    module: {
      rules: [
        {
          test: /\.m?js/,
          type: 'javascript/auto',
          resolve: {
            fullySpecified: false,
          },
        },
        {
          test: /\.js$|jsx/,
          exclude: /node_modules/,
          use: 'babel-loader',
        },
        {
          test: /\.json$/,
          use: 'json-loader',
        },
        {
          test: /\.svg$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: ['preact', 'env'],
              },
            },
            {
              loader: '@svgr/webpack',
              options: { babel: false },
            },
          ],
        },
      ],
    },
  });
};

webpack root-config

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-ts");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = (webpackConfigEnv, argv) => {
  const orgName = "app";
  const defaultConfig = singleSpaDefaults({
    orgName,
    projectName: "root-config",
    webpackConfigEnv,
    argv,
    disableHtmlGeneration: true,
  });

  return merge(defaultConfig, {
    plugins: [
      new HtmlWebpackPlugin({
        inject: false,
        template: "src/index.ejs",
        templateParameters: {
          isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
          orgName,
          hash: Date.now(),
        },
      }),
    ],
  });
};

index root-config

<script type="systemjs-importmap">
      {
      "imports": {
        "react": "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js",
        "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js",
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
        "@app/root-config": "https://login-7mpuan0pw5.s3.amazonaws.com/app-root-config.js",
        "@app/chat": "https://login-7mpuan0pw5.s3.amazonaws.com/app-chat-<%= hash %>.js",
        "@app/switcher": "https://login-7mpuan0pw5.s3.amazonaws.com/switcher/app-switcher-<%= hash %>.js"
      }
    }
  </script>
Zahar
  • 71
  • 1
  • 6

0 Answers0