React集成Webpack-Module-Federation与Brotli压缩时Remote文件生成失败求助

问题出在你自定义webpack配置的方式上——直接修改原始config并返回，跳过了Nx withModuleFederation内置的Module Federation配置逻辑。正确的做法是先调用默认的webpack配置处理函数，再添加CompressionPlugin。

修改后的webpack.config.js配置如下：

const CompressionPlugin = require('compression-webpack-plugin');
const withModuleFederation = require('@nrwl/react/module-federation');
const moduleFederationConfig = require('./module-federation.config');

module.exports = withModuleFederation({
  ...moduleFederationConfig,
  webpack: (config, options) => {
    // 先执行默认的Module Federation配置处理
    const updatedConfig = options.webpack(config, options);
    // 再添加Brotli压缩插件
    updatedConfig.plugins.push(
      new CompressionPlugin({
        filename: "[path][base].br",
        algorithm: "brotliCompress",
        test: /\.(js|css|html|svg)$/,
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false,
      })
    );
    return updatedConfig;
  },
});

原因说明 #

Nx的withModuleFederation会通过options.webpack函数注入Module Federation相关的插件和配置逻辑。如果你直接修改原始的config并返回，相当于跳过了这一步，自然不会生成Remote文件。先调用options.webpack(config, options)可以确保Module Federation的配置被正确应用，之后再添加自己的压缩插件就不会冲突了。

内容的提问来源于stack exchange，提问作者Animesh Maji