core/apps/manifest-demo/webpack-host/webpack.config.js at fc350dba6f7c22900a1a50b29be40e0392211126 · module-federation/core · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
const path = require('path');
const reactPath = path.dirname(require.resolve('react/package.json'));
const reactDomPath = path.dirname(require.resolve('react-dom/package.json'));
// const { registerPluginTSTranspiler } = require('nx/src/utils/nx-plugin.js');
// registerPluginTSTranspiler();
const {
  ModuleFederationPlugin,
} = require('@module-federation/enhanced/webpack');
const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');

module.exports = composePlugins(withNx(), withReact(), (config, context) => {
  config.watchOptions = config.watchOptions || {};
  config.watchOptions.ignored = config.watchOptions.ignored || [];

  // Ensure ignored is an array
  if (!Array.isArray(config.watchOptions.ignored)) {
    config.watchOptions.ignored = [config.watchOptions.ignored];
  }

  // Add our patterns
  ['**/node_modules/**', '**/@mf-types/**', '**/dist/**'].forEach((pattern) => {
    if (!config.watchOptions.ignored.includes(pattern)) {
      config.watchOptions.ignored.push(pattern);
    }
  });

  config.plugins.push(
    new ModuleFederationPlugin({
      runtime: false,
      name: 'manifest_host',
      remotes: {
        remote1: 'webpack_provider@http://localhost:3009/mf-manifest.json',
        'manifest-provider':
          'rspack_manifest_provider@http://localhost:3011/mf-manifest.json',
        'js-entry-provider':
          'rspack_js_entry_provider@http://localhost:3012/remoteEntry.js',
      },
      filename: 'remoteEntry.js',
      shared: {
        lodash: {},
        antd: {},
        'react/': {
          singleton: true,
          requiredVersion: '^18.3.1',
        },
        react: {
          singleton: true,
          requiredVersion: '^18.3.1',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.3.1',
        },
        'react-dom/': {
          singleton: true,
          requiredVersion: '^18.3.1',
        },
      },
      dataPrefetch: true,
      runtimePlugins: [path.join(__dirname, './runtimePlugin.ts')],
      experiments: {
        provideExternalRuntime: true,
        asyncStartup: true,
      },
    }),
  );

  config.plugins.push({
    name: 'nx-dev-webpack-plugin',
    apply(compiler) {
      compiler.options.devtool = false;
      compiler.options.resolve.alias = {
        ...compiler.options.resolve.alias,
        react: reactPath,
        'react-dom': reactDomPath,
      };
    },
  });
  config.plugins.forEach((p) => {
    if (p.constructor.name === 'ModuleFederationPlugin') {
      //Temporary workaround - https://github.com/nrwl/nx/issues/16983
      p._options.library = undefined;
    }
  });
  if (config.devServer) {
    config.devServer.client.overlay = false;
    config.devServer.devMiddleware.writeToDisk = true;
  }
  config.devtool = false;
  config.entry = './src/index.tsx';
  //Temporary workaround - https://github.com/nrwl/nx/issues/16983
  config.experiments = { outputModule: false };

  config.output = {
    ...config.output,
    scriptType: 'text/javascript',
  };
  config.optimization = {
    ...config.optimization,
    runtimeChunk: 'single',
    minimize: false,
    moduleIds: 'named',
    chunkIds: 'named',
    splitChunks: false,
  };
  config.output.publicPath = 'http://localhost:3013/';
  return config;
});