webpack.config.js

import path from 'path';
import {
  WebpackRscClientPlugin,
  WebpackRscServerPlugin,
  createWebpackRscClientLoader,
  createWebpackRscServerLoader,
  createWebpackRscSsrLoader,
  webpackRscLayerName,
} from '@mfng/webpack-rsc';
import CopyPlugin from 'copy-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import ResolveTypeScriptPlugin from 'resolve-typescript-plugin';
import {WebpackManifestPlugin} from 'webpack-manifest-plugin';

const outputDirname = path.join(import.meta.dirname, `dist`);
const outputHandlerDirname = path.join(outputDirname, `handler`);

const reactServerManifestFilename = path.join(
  outputHandlerDirname,
  `react-server-manifest.json`,
);

const reactClientManifestFilename = path.join(
  outputHandlerDirname,
  `react-client-manifest.json`,
);

const reactSsrManifestFilename = path.join(
  outputHandlerDirname,
  `react-ssr-manifest.json`,
);

const jsManifestFilename = path.join(outputHandlerDirname, `js-manifest.json`);

const cssManifestFilename = path.join(
  outputHandlerDirname,
  `css-manifest.json`,
);

/**
 * @param {unknown} _env
 * @param {{readonly mode?: import('webpack').Configuration['mode']}} argv
 * @return {import('webpack').Configuration[]}
 */
export default function createConfigs(_env, argv) {
  const {mode} = argv;
  const dev = mode === `development`;

  /**
   * @type {import('webpack').StatsOptions}
   */
  const stats = {
    assets: true,
    builtAt: true,
    chunks: false,
    colors: true,
    groupAssetsByEmitStatus: false,
    groupAssetsByExtension: true,
    groupAssetsByInfo: false,
    groupAssetsByPath: false,
    hash: false,
    modules: false,
    version: false,
  };

  const cssRule = {
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: `css-loader`,
        options: {
          modules: {
            localIdentName: dev
              ? `[local]__[hash:base64:5]`
              : `[hash:base64:7]`,
            auto: true,
          },
        },
      },
      {
        loader: `postcss-loader`,
        options: {
          postcssOptions: {
            plugins: [
              `tailwindcss`,
              `autoprefixer`,
              ...(dev ? [] : [`cssnano`]),
            ],
          },
        },
      },
    ],
  };

  /**
   * @type {import('@mfng/webpack-rsc').ClientReferencesMap}
   */
  const clientReferencesMap = new Map();
  const serverReferencesMap = new Map();

  const rscServerLoader = createWebpackRscServerLoader({
    clientReferencesMap,
    serverReferencesMap,
  });

  const rscSsrLoader = createWebpackRscSsrLoader({serverReferencesMap});
  const rscClientLoader = createWebpackRscClientLoader({serverReferencesMap});

  /**
   * @type {import('webpack').RuleSetUseItem}
   */
  const serverSwcLoader = {
    loader: `swc-loader`,
    options: {env: {targets: {node: 20}}},
  };

  /**
   * @type {import('webpack').Configuration}
   */
  const serverConfig = {
    name: `server`,
    entry: `./src/handler/index.tsx`,
    target: `node`,
    output: {
      filename: `index.js`,
      path: outputHandlerDirname,
      libraryTarget: `module`,
      chunkFormat: `module`,
      devtoolModuleFilenameTemplate: (
        /** @type {{ absoluteResourcePath: string; }} */ info,
      ) => info.absoluteResourcePath,
    },
    resolve: {
      extensions: [`.mjs`, `...`],
      plugins: [new ResolveTypeScriptPlugin()],
    },
    module: {
      rules: [
        {
          resource: [/\/server\/rsc\//, /\/app\.tsx$/],
          layer: webpackRscLayerName,
        },
        {
          resource: /\/server\/shared\//,
          layer: `shared`,
        },
        {
          issuerLayer: webpackRscLayerName,
          resolve: {conditionNames: [`react-server`, `...`]},
        },
        {
          oneOf: [
            {
              issuerLayer: webpackRscLayerName,
              test: /\.tsx?$/,
              use: [rscServerLoader, serverSwcLoader],
            },
            {
              test: /\.tsx?$/,
              use: [rscSsrLoader, serverSwcLoader],
            },
            {
              issuerLayer: webpackRscLayerName,
              test: /\.m?js$/,
              use: rscServerLoader,
            },
            {
              test: /\.m?jsx$/,
              use: rscSsrLoader,
            },
          ],
        },
        {test: /\.svg$/, type: `asset/inline`},
        cssRule,
      ],
    },
    plugins: [
      // server-main.css is not used, but required by MiniCssExtractPlugin.
      new MiniCssExtractPlugin({filename: `server-main.css`, runtime: false}),
      new WebpackRscServerPlugin({
        clientReferencesMap,
        serverReferencesMap,
        serverManifestFilename: path.relative(
          outputHandlerDirname,
          reactServerManifestFilename,
        ),
      }),
    ],
    experiments: {outputModule: true, layers: true, topLevelAwait: true},
    devtool: `source-map`,
    mode,
    stats,
  };

  const clientOutputDirname = path.join(outputDirname, `static/client`);

  /**
   * @type {import('webpack').Configuration}
   */
  const clientConfig = {
    name: `client`,
    dependencies: [`server`],
    entry: `./src/client.tsx`,
    output: {
      filename: dev ? `main.js` : `main.[contenthash:8].js`,
      path: clientOutputDirname,
      clean: !dev,
      publicPath: `/client/`,
    },
    resolve: {
      extensions: [`.mjs`, `...`],
      plugins: [new ResolveTypeScriptPlugin()],
    },
    module: {
      rules: [
        {
          test: /\.m?js$/,
          loader: `source-map-loader`,
          enforce: `pre`,
        },
        {
          test: /\.tsx?$/,
          use: [rscClientLoader, `swc-loader`],
        },
        {
          test: /\.m?js$/,
          use: rscClientLoader,
        },
        cssRule,
      ],
    },
    plugins: [
      new CopyPlugin({
        patterns: [{from: path.join(import.meta.dirname, `static`), to: `..`}],
      }),
      new MiniCssExtractPlugin({
        filename: dev ? `main.css` : `main.[contenthash:8].css`,
        runtime: false,
      }),
      new WebpackManifestPlugin({
        fileName: cssManifestFilename,
        publicPath: `/client/`,
        filter: (file) => file.path.endsWith(`.css`),
      }),
      new WebpackManifestPlugin({
        fileName: jsManifestFilename,
        publicPath: `/client/`,
        filter: (file) => file.path.endsWith(`.js`),
      }),
      new WebpackRscClientPlugin({
        clientReferencesMap,
        clientManifestFilename: path.relative(
          clientOutputDirname,
          reactClientManifestFilename,
        ),
        ssrManifestFilename: path.relative(
          clientOutputDirname,
          reactSsrManifestFilename,
        ),
      }),
    ],
    devtool: `source-map`,
    mode,
    stats,
  };

  return [serverConfig, clientConfig];
}