how do i add the following configuration mentioned here to a single-spa generated webpack config file extra-webpack.config.js ?

import linkerPlugin from '@angular/compiler-cli/linker/babel';

export default {
  // ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [linkerPlugin],
            compact: false,
            cacheDirectory: true,
          }
        }
      }
    ]
  }
  // ...
}

//extra-webpack.config.js (note the difernce in format)

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;

module.exports = (config, options) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);

  // Feel free to modify this webpack config however you'd like to~
  singleSpaWebpackConfig.externals.push(  
  
  );
  return singleSpaWebpackConfig;
};

Why am i trying this: to share an angular library with UI components in a single-spa framework with other angular micro apps. The library will be loaded once via systemjs-importmap like documented in single-spa. this is the snippet from anuglar.json file for the library if useful

 "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "outputPath": "dist",
        "index": "projects/my-lib/src/index.html",
        "main": "projects/my-lib/src/main.single-spa.ts",
        "customWebpackConfig": {
          "path": "projects/my-lib/extra-webpack.config.js",
          "libraryName": "@myOrg/my-lib",
          "libraryTarget": "system",
          "excludeAngularDependencies": true
        },
        "deployUrl": "http://localhost:4304/"
      },
      "configurations": {
        "production": {
          "tsConfig": "projects/my-lib/tsconfig.lib.prod.json"
        },
        "development": {
          "tsConfig": "projects/my-lib/tsconfig.lib.json"
        }
      },
      "defaultConfiguration": "production"
    },

Thanks

CodePudding user response：

I figured out the way. althought it does not solve the original intent of my issue, the question here is answered.

import pckg from 'single-spa-angular/lib/webpack';
import pckg1 from 'webpack-merge';
import linkerPlugin from '@angular/compiler-cli/linker/babel';
 

export default function (config, options) {
  const singleSpaWebpackConfig = pckg.default(config, options); 

  return pckg1.default(singleSpaWebpackConfig, {
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins: [linkerPlugin],
              compact: false,
              cacheDirectory: true,
            }
          }
        }
      ]
    }
  });
};