babel.config.js

const config = {
  presets: [
    ['@babel/preset-env', {
      "useBuiltIns": "entry"
    }],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: [
    ['@babel/plugin-transform-typescript', { allowDeclareFields: true }],
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-syntax-dynamic-import',
  ],
};

module.exports = config;

package.json

{
  "name": "",
  "version": "10.0.0",
  "description": "State of the art workspace (now redesigned for your pleasure)",
  "main": "index.js",
  "author": "",
  "license": "MIT",
  "scripts": {
    "dev": "webpack serve --progress",
    "lint": "yarn eslint",
    "stylelint": "stylelint 'src/**/*.css' --fix",
    "fix-lint": "yarn lint --ext .js,.ts,.tsx src/ --fix",
    "test": "jest",
    "prepare": "husky install"
  },
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "IE >= 11"
  ],
  "dependencies": {
    "@ag-grid-community/csv-export": "^24.1.0",
    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-components": "^2.7.1",
    "@aspnet/signalr": "^1.1.4",
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "@chakra-ui/react": "1.8.1",
    "@elastic/apm-rum": "^5.12.0",
    "@elastic/apm-rum-react": "^1.4.2",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@formatjs/intl-pluralrules": "^1.3.0",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@microsoft/signalr": "^5.0.11",
    "@module-federation/utilities": "^1.6.0",
    "@mui/material": "^5.10.14",
    "@svgr/webpack": "^6.5.1",
    "@tanstack/react-table": "^8.5.22",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.0.2",
    "@testing-library/react-hooks": "^3.4.1",
    "@testing-library/user-event": "^12.1.4",
    "@types/classnames": "^2.2.8",
    "@types/d3-hierarchy": "^2.0.0",
    "@types/echarts": "^4.4.6",
    "@types/history": "^4.7.2",
    "@types/jest": "^26.0.13",
    "@types/jssip": "^3.3.1",
    "@types/lodash": "^4.14.135",
    "@types/qrcode.react": "^0.8.2",
    "@types/query-string": "5.0.0",
    "@types/react": "^18.2.0",
    "@types/react-beautiful-dnd": "^12.1.2",
    "@types/react-big-calendar": "^1.6.4",
    "@types/react-color": "^2.17.0",
    "@types/react-datepicker": "^0.62.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-dropzone": "^4.2.2",
    "@types/react-grid-layout": "^0.17.1",
    "@types/react-helmet": "^6.0.0",
    "@types/react-input-mask": "^0.7.7",
    "@types/react-onclickoutside": "^6.0.1",
    "@types/react-paginate": "^6.2.0",
    "@types/react-redux": "^7.1.11",
    "@types/react-redux-toastr": "^7.4.1",
    "@types/react-router-dom": "^4.3.1",
    "@types/react-select": "^1.0.59",
    "@types/react-sticky-box": "^0.7.1",
    "@types/react-textarea-autosize": "^4.3.4",
    "@types/react-transition-group": "^2.0.6",
    "@types/react-window": "^1.8.5",
    "@types/redux-logger": "^3.0.7",
    "@types/scroll-into-view": "^1.13.1",
    "@types/styled-components": "^5.1.4",
    "@types/ua-parser-js": "^0.7.35",
    "@types/uuid": "^3.4.4",
    "@typescript-eslint/eslint-plugin": "^4.8.2",
    "@webpack-cli/serve": "^1.1.0",
    "ag-grid-community": "^23.0.0",
    "ag-grid-react": "^23.0.0",
    "antd": "5.16.4",
    "autoprefixer": "^9.6.0",
    "axios": "^0.19.2",
    "babel-eslint": "^10.0.2",
    "babel-jest": "^27.0.1",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "big.js": "^6.2.1",
    "classnames": "^2.2.6",
    "cli-color": "^2.0.0",
    "connected-react-router": "^6.8.0",
    "copy-webpack-plugin": "^6.3.2",
    "country-flag-icons": "^1.4.26",
    "css-loader": "^3.2.0",
    "css-minimizer-webpack-plugin": "^1.1.5",
    "date-fns": "^3.3.1",
    "dom-helpers": "^5.2.1",
    "dotenv": "^8.2.0",
    "echarts": "^4.7.0",
    "file-loader": "^6.2.0",
    "framer-motion": "^6.3.3",
    "gradient-color": "^2.0.1",
    "html-webpack-plugin": "^5.0.0-alpha.14",
    "install": "^0.13.0",
    "jest": "^26.4.2",
    "jest-css-modules": "^2.1.0",
    "jssip": "^3.6.1",
    "lodash": "^4.17.11",
    "mini-css-extract-plugin": "^1.3.1",
    "moment": "^2.29.4",
    "npm": "^8.19.3",
    "postcss-custom-media": "^7.0.8",
    "postcss-custom-properties": "^9.0.1",
    "postcss-custom-themes": "^0.1.0",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-mixins": "^6.2.1",
    "postcss-nested": "^4.1.2",
    "qrcode.react": "^0.9.3",
    "query-string": "^5.0.0",
    "react": "17.0.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-big-calendar": "^1.8.2",
    "react-color": "^2.14.1",
    "react-d3-tree": "2.0.1",
    "react-datepicker": "1.8.0",
    "react-dom": "17.0.0",
    "react-dropzone": "^8.0.4",
    "react-grid-layout": "^0.18.3",
    "react-helmet": "^6.1.0",
    "react-html-table-to-excel": "^2.0.0",
    "react-input-mask": "^1.0.7",
    "react-input-range": "^1.3.0",
    "react-intl": "^3.3.2",
    "react-onclickoutside": "^6.6.3",
    "react-paginate": "^5.0.0",
    "react-redux": "^7.2.2",
    "react-redux-toastr": "^7.5.1",
    "react-router-dom": "^4.3.1",
    "react-rte": "^0.16.0",
    "react-select": "^1.0.0-rc.10",
    "react-sortable-hoc": "^2.0.0",
    "react-sortable-tree": "^2.8.0",
    "react-sticky-box": "^0.8.0",
    "react-test-renderer": "^16.13.1",
    "react-textarea-autosize": "^7.1.0",
    "react-tippy": "^1.2.2",
    "react-transition-group": "^4.4.2",
    "react-use-measure": "^2.1.1",
    "react-window": "^1.8.6",
    "react-yandex-maps": "^4.2.0",
    "redux-act": "1.7.7",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "remote-file-webpack-plugin": "^1.0.2",
    "reselect": "^4.1.7",
    "scroll-into-view": "^1.16.0",
    "stickybits": "^3.6.7",
    "style-loader": "^3.3.1",
    "styled-components": "^4.1.3",
    "stylelint": "^13.13.1",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-declaration-use-variable": "^1.7.2",
    "tableau-react": "^2.0.0-beta.0",
    "ua-parser-js": "^0.7.23",
    "use-dynamic-refs": "^1.0.0",
    "uuid": "^3.3.2",
    "webpack": "^5.9.0",
    "webpack-cli": "^4.2.0",
    "webpack-merge": "^5.4.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@types/big.js": "^6.1.6",
    "@types/node": "18.11.9",
    "@types/react-sortable-tree": "0.3.13",
    "clsx": "^1.2.1",
    "esbuild-loader": "^2.20.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-typescript": "^12.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-jest": "^3.0.0",
    "eslint-import-resolver-typescript": "^2.3.0",
    "eslint-plugin-grouped-import": "^1.0.3",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "7.0.4",
    "nodemon": "^2.0.2",
    "prettier": "^2.7.1",
    "sass": "^1.56.1",
    "sass-loader": "12.6.0",
    "terser-webpack-plugin": "^5.3.9",
    "ts-jest": "^29.1.1",
    "typescript": "4.1.6",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js

const webpack = require('webpack');
const { ModuleFederationPlugin } = require('webpack').container;
const { merge } = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoteFilePlugin = require('remote-file-webpack-plugin');
const path = require('path');

const devConfig = require('./webpack/dev');
const prodConfig = require('./webpack/prod');

const clc = require('cli-color');
const getConfig = require('./serverConfig');

const serverConfig = getConfig();

const info = clc.cyanBright.bold;
const link = clc.magentaBright.bold.underline;

const envConfigs = require('./configs');
const { tree } = require('d3-hierarchy');

const isProduction = process.env.NODE_ENV === 'production';

const nodeEnv = isProduction ? 'production' : 'development';

const env = envConfigs();
const clientConfig = {
  entry: ['@babel/polyfill', './src/index.ts'],
  output: {
    filename: isProduction ? '[name].[contenthash].js' : '[name].js',
    //chunkFilename: isProduction ? 'chunks/[name].[chunkhash].js' : 'chunks/[name].[fullhash].js',
    path: `${__dirname}/build/public`,
    publicPath: '/'
  },
  target: !isProduction ? 'web' : ['web', 'browserslist'],
  mode: nodeEnv,
  module: {
    rules: [
      { test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto' },
      {
        test: /\.(ts|js)x?$/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true
        },
        include: [path.resolve('./src'), path.resolve('./node_modules')]
      },
      {
        test: /\.css$/,
        oneOf: [
          {
            resourceQuery: /globalWithModules/,
            use: [
              isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 1,
                  modules: {
                    localIdentName: '[local]',
                    context: path.resolve(__dirname, 'src')
                  }
                }
              },
              'postcss-loader'
            ]
          },
          {
            resourceQuery: /global/,
            use: [MiniCssExtractPlugin.loader, 'css-loader']
          },
          {
            resourceQuery: /uikit/,
            use: [
              isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 2,
                  modules: {
                    getLocalIdent(context, localIdentName, localName) {
                      const base = path.parse(context.resourcePath).name;

                      if (localName.startsWith('root')) {
                        return base;
                      }

                      return `${base}-${localName}`;
                    },
                    context: path.resolve(__dirname, 'src')
                  }
                }
              },
              'postcss-loader'
            ]
          },
          {
            use: [
              isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 1,
                  modules: {
                    localIdentName: isProduction ? '[hash:base64]' : '[path][name]__[local]',
                    context: path.resolve(__dirname, 'src')
                  },
                  localsConvention: 'camelCase'
                }
              },
              'postcss-loader'
            ]
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: {
                localIdentName: 'Ws[name]-[local]'
              }
            }
          },
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ],
        include: [path.resolve('./node_modules')]
      },
      {
        test: /\.svg$/,
        issuer: /\.tsx$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: { icon: true }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.css', '.svg', '.json', '.mjs'],
    symlinks: true,
    modules: [path.resolve('./src'), path.resolve('./node_modules')],
    fallback: {
      'sdk': path.resolve(__dirname, 'node_modules/sdk/lib/app.umd.js'),
      'path': false,
    },
  },
  devServer: {
    disableHostCheck: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': '*',
      'Access-Control-Allow-Headers': '*'
    },
    historyApiFallback: true,
    port: serverConfig.PORT,
    hot: !isProduction,
    inline: true,
    contentBase: 'build',
    proxy: {
      '/api': {
        target: serverConfig.API_URL,
        secure: false,
        changeOrigin: true,
        pathRewrite: process.env.BASE_URL
          ? {
              'api/v1': process.env.BASE_URL
            }
          : undefined
      },
      '/gateway/support': {
        target: process.env.SUPPORT_APP_URL,
        secure: false,
        changeOrigin: true
      },
      '/gateway/landing-service': {
        target: 'http://frontend.sdk.local',
        secure: false,
        changeOrigin: true,
      },
      '/gateway/individual-mf': {
        target: 'http://localhost:3001',
        secure: false,
        changeOrigin: true
      },
    },
    before: () => {
      console.info(info(' API url -> ') + link(serverConfig.API_URL));
    }
  },
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /ru/),
    new MiniCssExtractPlugin({
      ignoreOrder: true,
      filename: 'css/app.[contenthash].css',
      chunkFilename: 'css/[name]-[id].[contenthash].css'
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeEnv),
        ENV_NAME: JSON.stringify(process.env.ENV_NAME),
        API_URL: JSON.stringify(process.env.API_URL),
        LOGGER: JSON.stringify(process.env.LOGGER),
        FAVICON: JSON.stringify(env.FAVICON),
        REDUX_LOGGER: JSON.stringify(process.env.REDUX_LOGGER),
        REDUX_DEVTOOLS: JSON.stringify(process.env.REDUX_DEVTOOLS),
        SUPPORT_APP_URL: JSON.stringify(process.env.SUPPORT_APP_URL)
      }
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public/'
        },
        {
          from: 'src/locales/',
          to: 'assets/locales/'
        },
        {
          from: 'src/css/fonts/',
          to: 'assets/fonts/'
        }
      ]
    }),
    new RemoteFilePlugin([
      {
        url: 'https://vk.com/js/api/openapi.js?160',
        filepath: 'assets/js/vk.js',
        hash: false
      },
    ]),
    new ModuleFederationPlugin({
      name: 'WS',
      shared: {
        react: {
          singleton: true,
          eager: true,
        },
        'react-dom': {
          singleton: true
        },
        '@formatjs/intl-pluralrules': {
          singleton: true
        },
        classnames: {
          singleton: true
        },
        lodash: {
          singleton: true
        },
        moment: {
          singleton: true
        },
        'react-intl': {
          singleton: true
        },
        'sdk': {
          singleton: true
        }
      }
    })
  ]
};

module.exports = isProduction ? merge(clientConfig, prodConfig) : merge(clientConfig, devConfig);