ed-ui-settings/webpack.config.js

Прототип микрофронтенда Настройки ЦРП ЭДОК

import {
  buildEnvironment,
  getDevServerConfig,
  getLoadersDefinitions,
  getPluginDefinitions,
  getResolveConfig,
  getResolvedPaths,
} from "@ed-ui-config/webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import path from "path";
import TerserPlugin from "terser-webpack-plugin";
import webpack from "webpack";

const resolvedPaths = getResolvedPaths({
  appPackageJson: "package.json",
  appSrc: "src",
  appTsConfig: "tsconfig.json",
  appNodeModules: "node_modules",
  appBuild: "build",
  appIndex: "src/index",
  appPublic: "public",
  appHtml: "public/index.html",
});

const environment = buildEnvironment();

// определяем, нужно ли включать профайлер в production билдах
const isEnvProductionProfile =
  !environment.IS_DEV && process.argv.includes("--profile");

const config = {
  target: ["browserslist"],
  stats: "errors-warnings",
  // Stop compilation early in production
  bail: !environment.IS_DEV,
  devtool: !environment.IS_DEV
    ? environment.GENERATE_SOURCEMAP
      ? "source-map"
      : false
    : environment.IS_DEV && "cheap-module-source-map",
  entry: resolvedPaths.appIndex,
  output: {
    path: resolvedPaths.appBuild,
    // Добавлять комментарии вида /* filename */ к сгенерированным вызовам require() в коде после сборки.
    pathinfo: environment.IS_DEV,
    //у remote-микрофронтов лучше оставлять publicPath=auto, чтобы ресурсы и модули можно было корректно зарезолвить из host-микрофронта
    publicPath: "auto",
    // темплейт для генерации пути и имени основного бандла
    filename: "static/js/[name].[contenthash:8].js",
    // темплейт для генерации пути и имени чанков (пока не используется, т.к. нет code splitting-а)
    chunkFilename: "static/js/[name].[contenthash:8].chunk.js",
    assetModuleFilename: "static/media/[name].[hash][ext]",
    clean: true,
    // Point sourcemap entries to original disk location (format as URL on Windows)
    devtoolModuleFilenameTemplate: environment.IS_DEV
      ? (info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")
      : (info) =>
          path
            .relative(resolvedPaths.appSrc, info.absoluteResourcePath)
            .replace(/\\/g, "/"),
  },
  //включаем кэширование только для билдов в дев-режиме или для любых режимов, если запущен webpack-dev-server
  cache:
    environment.IS_DEV || environment.IS_LOCAL_SERVER
      ? {
          type: "memory",
          maxGenerations: 5,
        }
      : false,
  infrastructureLogging: {
    level: "none",
  },
  /**@TODO перенести конфиг оптимизации в @ed-ui-config/webpack */
  optimization: {
    minimize: !environment.IS_DEV,
    minimizer: [
      // используем только для production-билдов
      new TerserPlugin({
        terserOptions: {
          compress: {
            ecma: 5,
            /**
             * @TODO проверить, что баг еще актуален, и обновить плагин, если баг был исправлен в новой версии
             * Disabled because of an issue with Uglify breaking seemingly valid code:
             * https://github.com/facebook/create-react-app/issues/2376
             * Pending further investigation:
             * https://github.com/mishoo/UglifyJS2/issues/2011
             */
            comparisons: false,
            /**
             * @TODO проверить, что баг еще актуален, и обновить плагин, если баг был исправлен в новой версии
             * Disabled because of an issue with Terser breaking valid code:
             * https://github.com/facebook/create-react-app/issues/5250
             * Pending further investigation:
             * https://github.com/terser-js/terser/issues/120
             */
            inline: 2,
          },
          mangle: {
            safari10: true,
          },
          // полезные настройки для профайлера в devtools
          keep_classnames: isEnvProductionProfile,
          keep_fnames: isEnvProductionProfile,
          output: {
            ecma: 5,
            comments: false,
            // Turned on because emoji and regex is not minified properly using default
            // https://github.com/facebook/create-react-app/issues/2488
            ascii_only: true,
          },
        },
      }),
    ],
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
  resolve: getResolveConfig(environment, resolvedPaths),
  module: getLoadersDefinitions(environment, resolvedPaths),
  plugins: getPluginDefinitions(environment, resolvedPaths).concat(
    new webpack.container.ModuleFederationPlugin({
      //в имени нельзя использовать -
      name: "ed_ui_settings",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App",
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: "^18.0.0",
          eager: true,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: "^18.0.0",
          eager: true,
        },
        "@mui/material": {
          singleton: true,
          requiredVersion: "^5.0.0",
          eager: true,
        },
        "@mui/icons-material": {
          singleton: true,
          requiredVersion: "^5.0.0",
          eager: true,
        },
        "@mui/utils": {
          singleton: true,
          requiredVersion: "^5.0.0",
          eager: true,
        },
      },
    }),
    // Generates an `index.html` file with the <script> injected.
    new HtmlWebpackPlugin(
      Object.assign(
        {
          inject: true,
          template: resolvedPaths.appHtml,
          title: "Настройки",
        },
        !environment.IS_DEV
          ? {
              minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
              },
            }
          : undefined,
      ),
    ),
  ),
  devServer: getDevServerConfig({
    port: 3018,
  }),
};

export default config;