webpack.config.js

const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const autoprefixer = require('autoprefixer');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  mode: 'development',
  output: { filename: 'insta.[id].js' },

  module: {
    rules: [
      {
        test: /\.(jpeg|jpg|png|gif|svg|webp)$/i,
        loader: 'file-loader',
      },
      {
        test: /\.js|json$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                [
                  'autoprefixer',
                ],
              ],
            },
          },
        }],
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin(
      {
        name: 'INSTA',
        filename:
          'remoteEntry.js',
        exposes: {
          './Insta':
            './src/pages/home/index.js',
        },
        shared: [{
          react: {
            requiredVersion: '^17.0.2',
            singleton: true,
          },
        }],
      },
    ),
    new CopyWebpackPlugin({
      patterns: [
        'src/public/_redirects',
        'src/public/robots.txt',
      ],
    }),
    new MiniCssExtractPlugin({
      chunkFilename: 'styles.css',
    }),
    new HtmlWebPackPlugin({
      title: 'Harish Kumar',
      template: 'src/public/index.html',
    }),
  ],
  devServer: {
    port: 8081,
  },
  resolve: {
    alias: {
      Components: path.resolve(__dirname, './src/components'),
      Pages: path.resolve(__dirname, './src/pages'),
      Icons: path.resolve(__dirname, './src/icons'),
      Images: path.resolve(__dirname, './src/images'),

    },
    extensions: ['', '.js'],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          type: 'css/mini-extract',
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
};