如何将 webpack 配置添加到单水疗中心生成的 webpack 配置文件 [single-spa+angular14]

Question

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

Answer 1

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,
            }
          }
        }
      ]
    }
  });
};