Angular14+single-spa：如何添加指定Webpack配置到extra-webpack.config.js

1. 安装必要依赖 #

首先安装配置所需的开发依赖：

npm install --save-dev @angular/compiler-cli babel-loader @babel/core

2. 修改extra-webpack.config.js配置 #

将原CommonJS格式的配置文件修改为如下内容，适配CommonJS语法引入linkerPlugin，并添加对应的webpack规则：

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;
// 用CommonJS方式引入linkerPlugin
const linkerPlugin = require('@angular/compiler-cli/linker/babel').default;

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

  // 添加linkerPlugin对应的babel loader规则
  singleSpaWebpackConfig.module.rules.push({
    test: /\.m?js$/,
    use: {
      loader: 'babel-loader',
      options: {
        plugins: [linkerPlugin],
        compact: false,
        cacheDirectory: true,
      }
    }
  });

  // 添加需要共享的Angular核心依赖到externals，避免打包进组件库
  singleSpaWebpackConfig.externals.push(
    '@angular/core',
    '@angular/common',
    '@angular/common/http',
    '@angular/router',
    // 根据你的组件库依赖，补充其他需要共享的包
  );

  return singleSpaWebpackConfig;
};

3. 确认angular.json配置有效性 #

检查你的angular.json中customWebpackConfig的配置，确保以下关键参数正确：

• excludeAngularDependencies: true：确保Angular核心依赖不会被打包进组件库
• libraryTarget: "system"：生成符合SystemJS规范的包，适配importmap共享场景

4. 验证配置 #

执行组件库的构建命令，检查打包产物是否符合预期：

ng build my-lib

内容的提问来源于stack exchange，提问作者Tiju John