webpack.mfe1.config.js

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const mfe1 = {
    entry: "./mfe1/main",
    mode: "development",
    devServer: {
        static: path.join(__dirname, "dist/mfe1"),
        port: 3000
    },
    module: {
        rules: [{
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.ts$/,
                use: {
                    loader: 'ts-loader',
                    options: {
                        configFile: 'tsconfig.json'
                    }
                },
                exclude: /node_modules/,
            },
        ],
    },
    output: {
        publicPath: "http://localhost:3000/",
        uniqueName: 'mfe1',
        path: path.join(__dirname, "dist/mfe1"),
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.ts', '.js'],
        plugins: [new TsconfigPathsPlugin({})]
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new ModuleFederationPlugin({
            name: "mfe1",
            library: { type: "var", name: "mfe1" },
            filename: "remoteEntry.js",
            exposes: {
                "./component": "./mfe1/component"
            },
            shared: {
                "rxjs": {},
                "shared-lib": {
                    import: "shared-lib",
                    packageName: "shared-lib",
                    shareKey: "shared-lib",
                    requiredVersion: "0.0.1" // or false
                }
            }
        }),
        new HtmlWebpackPlugin({
            template: "./mfe1/index.html"
        }),
    ]
};

module.exports = mfe1;