@gez/rspack/dist/html-app.mjs

A high-performance Rspack integration for Gez microfrontend framework, providing module federation and SSR capabilities.

import {
  rspack
} from "@rspack/core";
import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
import {
  createRspackApp
} from "./app.mjs";
import { RSPACK_LOADER } from "./loader.mjs";
export async function createRspackHtmlApp(gez, options) {
  options = {
    ...options,
    target: {
      web: ["chrome>=87", "edge>=88", "firefox>=78", "safari>=14"],
      node: ["node>=22.6"],
      ...options?.target
    },
    css: options?.css ? options.css : gez.isProd ? "css" : "js"
  };
  return createRspackApp(gez, {
    ...options,
    config(context) {
      const { config, buildTarget } = context;
      config.stats = "errors-warnings";
      config.module = {
        ...config.module,
        rules: [
          ...config.module?.rules ?? [],
          {
            test: /\.(jpe?g|png|gif|bmp|webp|svg)$/i,
            type: "asset/resource",
            generator: {
              filename: filename(gez, "images")
            }
          },
          {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/i,
            type: "asset/resource",
            generator: {
              filename: filename(gez, "media")
            }
          },
          {
            test: /\.(woff|woff2|eot|ttf|otf)(\?.*)?$/i,
            type: "asset/resource",
            generator: {
              filename: filename(gez, "fonts")
            }
          },
          {
            test: /\.json$/i,
            type: "json"
          },
          {
            test: /\.worker\.(c|m)?(t|j)s$/i,
            loader: options.loaders?.workerRspackLoader ?? RSPACK_LOADER.workerRspackLoader,
            options: {
              esModule: false,
              filename: `${gez.name}/workers/[name].[contenthash]${gez.isProd ? ".final" : ""}.js`
            }
          },
          {
            test: /\.(ts|mts)$/i,
            loader: options.loaders?.builtinSwcLoader ?? RSPACK_LOADER.builtinSwcLoader,
            options: {
              env: {
                targets: buildTarget === "client" ? options?.target?.web : options?.target?.node,
                ...options?.swcLoader?.env
              },
              jsc: {
                parser: {
                  syntax: "typescript",
                  ...options?.swcLoader?.jsc?.parser
                },
                ...options?.swcLoader?.jsc
              },
              ...options?.swcLoader
            },
            type: "javascript/auto"
          }
        ]
      };
      config.optimization = {
        ...config.optimization,
        minimizer: [
          new rspack.SwcJsMinimizerRspackPlugin({
            minimizerOptions: {
              format: {
                comments: false
              }
            }
          }),
          new rspack.LightningCssMinimizerRspackPlugin({
            minimizerOptions: {
              targets: options.target?.web,
              errorRecovery: false
            }
          })
        ]
      };
      config.plugins = [
        new NodePolyfillPlugin(),
        ...config.plugins ?? []
      ];
      config.devtool = false;
      config.cache = false;
      if (options.definePlugin) {
        const defineOptions = {};
        Object.entries(options.definePlugin).forEach(
          ([name, value]) => {
            const targetValue = typeof value === "string" ? value : value[buildTarget];
            if (typeof targetValue === "string" && name !== targetValue) {
              defineOptions[name] = targetValue;
            }
          }
        );
        if (Object.keys(defineOptions).length) {
          config.plugins.push(new rspack.DefinePlugin(defineOptions));
        }
      }
      config.resolve = {
        ...config.resolve,
        extensions: ["...", ".ts"]
      };
      addCssConfig(gez, options, context);
      options?.config?.(context);
    }
  });
}
function filename(gez, name, ext = "[ext]") {
  return gez.isProd ? `${name}/[name].[contenthash:8].final${ext}` : `${name}/[path][name]${ext}`;
}
function addCssConfig(gez, options, { config }) {
  if (options.css === false) {
    return;
  }
  if (options.css === "js") {
    const cssRule = [
      {
        loader: options.loaders?.styleLoader ?? RSPACK_LOADER.styleLoader,
        options: options.styleLoader
      },
      {
        loader: options.loaders?.cssLoader ?? RSPACK_LOADER.cssLoader,
        options: options.cssLoader
      },
      {
        loader: options.loaders?.lightningcssLoader ?? RSPACK_LOADER.lightningcssLoader,
        options: {
          targets: options.target?.web ?? [],
          minify: gez.isProd
        }
      }
    ];
    const lessRule = [
      {
        loader: options.loaders?.lessLoader ?? RSPACK_LOADER.lessLoader,
        options: options.lessLoader
      }
    ];
    if (options.styleResourcesLoader) {
      lessRule.push({
        loader: options.loaders?.styleResourcesLoader ?? RSPACK_LOADER.styleResourcesLoader,
        options: options.styleResourcesLoader
      });
    }
    config.module = {
      ...config.module,
      rules: [
        ...config.module?.rules ?? [],
        {
          test: /\.less$/,
          use: [...cssRule, ...lessRule],
          type: "javascript/auto"
        },
        {
          test: /\.css$/,
          use: cssRule,
          type: "javascript/auto"
        }
      ]
    };
    return;
  }
  config.experiments = {
    ...config.experiments,
    css: true
  };
  if (!config.experiments.css) {
    return;
  }
  const lessLoaders = [
    {
      loader: options.loaders?.lessLoader ?? RSPACK_LOADER.lessLoader,
      options: options.lessLoader
    }
  ];
  if (options.styleResourcesLoader) {
    lessLoaders.push({
      loader: options.loaders?.styleResourcesLoader ?? RSPACK_LOADER.styleResourcesLoader,
      options: options.styleResourcesLoader
    });
  }
  config.module = {
    ...config.module,
    rules: [
      ...config.module?.rules ?? [],
      {
        test: /\.less$/,
        use: [...lessLoaders],
        type: "css"
      }
    ]
  };
}