Webpack打包时如何保留ModuleFederation模块名不被混淆？

你的问题核心是：之前配置Terser时用了mangle.properties.reserved，但这个选项是用来保留对象属性名的，而myWonderfulModule是Webpack生成的全局顶层变量，所以这个配置根本没作用。

要保留这个全局变量名，正确的做法是在Terser的mangle根级别配置reserved数组，直接指定要保留的顶层变量名：

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        mangle: {
          // 直接在mangle下配置reserved，保留全局顶层变量
          reserved: ['myWonderfulModule'],
          properties: {
            // 这里是保留对象属性的配置，和你的需求无关可以留空或删除
          },
        },
      },
    }),
  ],
},

另外，如果你用的是Webpack 5及以上版本，还可以在ModuleFederationPlugin里显式配置library选项，明确告诉Webpack这个模块的全局导出方式，进一步避免压缩工具误混淆：

plugins: [
  new webpack.container.ModuleFederationPlugin({
    name: 'myWonderfulModule',
    filename: '[name].js',
    exposes: {
      '.': './src/index.js', 
    },
    // 添加library配置，明确全局变量的导出类型和名称
    library: { type: 'var', name: 'myWonderfulModule' }
  }),
],

这两种方式结合使用，就能确保压缩后的远程包依然保留myWonderfulModule这个全局变量名，宿主应用的import('myWonderfulModule')可以正常加载模块。

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