Angular 14中如何在Webpack配置中添加GraphQL Loader规则

你的Webpack配置写法有误，导致自定义的loader规则没有被正确合并到Module Federation的配置中。以下是修正后的配置方案：

修正配置结构 #

当前你把自定义module配置和withModuleFederationPlugin的返回值用逗号分开导出，这不符合Webpack配置的导出规范。正确的做法是将自定义loader规则合并到withModuleFederationPlugin生成的配置中：

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

// 先通过插件生成基础配置
const mfWebpackConfig = withModuleFederationPlugin({
  name: 'sampleUi',
  exposes: {
     './Module': './projects/sample-ui/src/app/search/search.module.ts',
  },
  shared: shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  sharedMappings: [],
});

// 合并自定义GraphQL loader规则
mfWebpackConfig.module.rules.push({
  test: /\.(graphql|gql|graphqls)$/,
  exclude: /node_modules/,
  loader: 'graphql-tag/loader'
});

module.exports = mfWebpackConfig;

额外检查项 #

• 确保已经安装了graphql-tag依赖：

  npm install graphql-tag --save-dev
  

• 确认你的GraphQL文件路径匹配test规则中的后缀（.graphql/.gql/.graphqls），且没有被exclude规则排除。

这种方式既保留了withModuleFederationPlugin的数据共享能力，又正确添加了GraphQL loader规则。

内容的提问来源于stack exchange，提问作者Rajesh Rajendran