Rspack：webpack 兼容 API 之下的 Rust 应用打包器

import { HtmlRspackPlugin } from '@rspack/core';

export default {
  mode: 'production',
  target: ['web', 'es2022'],
  entry: './src/main.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: { parser: { syntax: 'typescript' } },
          },
        },
      },
      {
        test: /\.css$/,
        type: 'css/auto',
      },
    ],
  },
  plugins: [
    new HtmlRspackPlugin({
      templateContent: '<div id="app"></div>',
    }),
  ],
  output: {
    filename: 'assets/[name].[contenthash:8].js',
    chunkFilename: 'assets/[name].[contenthash:8].js',
    cssFilename: 'assets/[name].[contenthash:8].css',
    publicPath: './',
    clean: true,
  },
};

export default {
  module: {
    rules: [
      {
        test: /\.(?:js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            detectSyntax: 'auto',
            jsc: {
              parser: { syntax: 'typescript', tsx: true },
              transform: { react: { runtime: 'automatic' } },
            },
          },
        },
      },
      {
        test: /\.css$/,
        type: 'css/auto',
      },
    ],
  },
};

button.addEventListener('click', async () => {
  const { renderDetail } = await import('./detail');
  renderDetail(panel);
});

pnpm --filter @roadmap/build-tools-slice build:rspack
node --test --test-name-pattern rspack examples/build-tools/test/artifacts.test.mjs

import stats from './dist/rspack/stats.json' with { type: 'json' };

for (const chunk of stats.chunks ?? []) {
  console.log(chunk.id, chunk.names, chunk.files);
}

{
  "scripts": {
    "build": "rspack build --config rspack.config.mjs",
    "typecheck": "tsc --noEmit"
  }
}

export default {
  cache: {
    type: 'persistent',
    maxAge: 7 * 24 * 60 * 60,
    maxVersions: 3,
  },
};

export default {
  entry: {
    home: './src/home.ts',
    admin: './src/admin.ts',
  },
  lazyCompilation: {
    entries: true,
    imports: true,
    test(module) {
      const name = module.nameForCondition();
      return name ? !/always-eager/.test(name) : true;
    },
  },
};

pnpm --filter @roadmap/build-tools-slice build:rspack

{
  "build:rspack": "rspack build --config configs/rspack.config.mjs --json dist/rspack/stats.json"
}

import { rspack } from '@rspack/core';

export default {
  output: {
    uniqueName: 'shell',
    publicPath: 'auto',
  },
  plugins: [
    new rspack.container.ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        catalog: 'catalog@https://cdn.example.com/catalog/remoteEntry.js',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^19.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^19.0.0' },
      },
    }),
  ],
};

pnpm --filter @roadmap/build-tools-slice build:rspack

node --test --test-name-pattern rspack examples/build-tools/test/artifacts.test.mjs

node-version
pnpm-lock-hash
rspack-version
loader-plugin-version
rspack-config-hash
target-env