// Rspack 的 Rust 代码示意
pub struct Compiler {
    pub options: CompilerOptions,
    pub plugins: Vec<Box<dyn Plugin>>,
    pub resolvers: HashMap<ResolverKind, Resolver>,
}

impl Compiler {
    pub fn run(&mut self) -> Result<()> {
        // 1. 解析入口
        // 2. 并行处理所有模块
        // 3. 构建依赖图
        // 4. 优化 chunk
        // 5. 输出文件
    }
}

// 用 swc 转译 TS
let fm = swc::SourceFile::new(...);
let lexer = Lexer::new(...);
let mut parser = Parser::new_from(lexer);
let module = parser.parse_module().unwrap();
let transformed = Transform::new().transform(module);

// Rust 调用 JS loader
let result = node_runtime.call(
    loader_path,
    source_code,
    loader_options,
)?;

// rspack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/dist',
        filename: '[name].[contenthash].js',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'builtin:swc-loader',
                options: {
                    jsc: {
                        parser: { syntax: 'typescript', tsx: true },
                        target: 'es2020',
                    },
                },
            },
            {
                test: /\.css$/,
                use: ['css-loader', 'postcss-loader'],
            },
        ],
    },
    plugins: [
        new rspack.HtmlRspackPlugin({  // 替代 HtmlWebpackPlugin
            template: './public/index.html',
        }),
    ],
};

# 安装
npm install -D @rspack/core @rspack/cli

# 启动 dev server
npx rspack serve

# 构建
npx rspack build

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
    plugins: [pluginReact()],
    html: {
        template: './index.html',
    },
    source: {
        entry: { index: './src/index.ts' },
    },
});

# 开发
npx rsbuild dev

# 构建
npx rsbuild build

# 预览构建产物
npx rsbuild preview

// webpack.config.js 改几个名字就能用
const config = {
    entry: './src/index.js',
    output: { path: './dist', filename: '[name].js' },
    module: {
        rules: [{ test: /\.css$/, use: 'css-loader' }],
    },
    // ... 其他都一样
};

module.exports = config;

- const path = require('path');
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- const MiniCssExtractPlugin = require('mini-css-extract-plugin');
- const { DefinePlugin } = require('webpack');
+ const path = require('path');
+ const rspack = require('@rspack/core');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash:8].js',
        clean: true,
    },
    module: {
        rules: [
-           { test: /\.tsx?$/, use: 'ts-loader' },
+           { test: /\.tsx?$/, loader: 'builtin:swc-loader' },
            {
                test: /\.css$/,
-               use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
+               use: [rspack.CssExtractRspackPlugin.loader, 'css-loader', 'postcss-loader'],
            },
        ],
    },
    plugins: [
-       new HtmlWebpackPlugin({ template: './public/index.html' }),
+       new rspack.HtmlRspackPlugin({ template: './public/index.html' }),
-       new MiniCssExtractPlugin({ filename: '[name].[contenthash:8].css' }),
+       new rspack.CssExtractRspackPlugin({ filename: '[name].[contenthash:8].css' }),
        new rspack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production'),
        }),
    ],
};

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginTypeCheck } from '@rsbuild/plugin-type-check';

export default defineConfig({
    plugins: [
        pluginReact(),
        pluginTypeCheck(),  // 独立类型检查
    ],

    source: {
        entry: {
            index: './src/index.tsx',
        },
        alias: {
            '@': './src',
        },
        define: {
            'process.env.APP_VERSION': JSON.stringify(process.env.npm_package_version),
        },
    },

    html: {
        template: './public/index.html',
        title: 'My App',
        meta: {
            description: 'My React App',
        },
    },

    output: {
        distPath: {
            root: 'dist',
        },
        polyfill: 'usage',       // 按需 polyfill
        cleanDistPath: true,
    },

    server: {
        port: 3000,
        open: true,
        historyApiFallback: true,
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true,
            },
        },
    },

    performance: {
        chunkSplit: {
            strategy: 'split-by-experience',
        },
        removeConsole: ['log', 'info'],  // 生产环境去掉 console
    },

    tools: {
        swc: {
            jsc: {
                transform: {
                    react: {
                        runtime: 'automatic',  // React 17+ JSX runtime
                    },
                },
            },
        },
    },
});

// 应用 A - 暴露组件
new rspack.container.ModuleFederationPlugin({
    name: 'appA',
    filename: 'remoteEntry.js',
    exposes: {
        './Button': './src/components/Button',
        './Modal': './src/components/Modal',
    },
    shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
    },
});

// 应用 B - 消费组件
new rspack.container.ModuleFederationPlugin({
    name: 'appB',
    remotes: {
        appA: 'appA@https://cdn.company.com/appA/remoteEntry.js',
    },
    shared: {
        react: { singleton: true },
    },
});