webpackでTypeScriptをトランスパイルする際に、ts-loaderの代わりにesbuild（esbuild-loader）を使うこともできるが、swc（swc-loader）を使うこともできる。

依存関係には、@swc/coreとswc-loaderを追加する。

# npm
npm install -D @swc/core swc-loader
# yarn
yarn add -D @swc/core swc-loader
# pnpm
pnpm add -D @swc/core swc-loader

あとは、ts-loaderの代わりにswc-loaderを使うように設定する。

webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.([jt]sx?)?$/,
                exclude: /node_modules/,
                use: {
                    loader: "swc-loader",
                    // https://swc.rs/docs/configuration/compilation
                    options: {
                        jsc: {
                            parser: {
                                syntax: "typescript",
                                tsx: true,
                            },
                        },
                    },
                },
            },
        ],
    },
};

設定にはoptionsを使ってもいいが、.swcrcを使っても良い。

webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.([jt]sx?)?$/,
                exclude: /node_modules/,
                use: "swc-loader",
            },
        ],
    },
};

.swcrc:

{
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "tsx": true
        }
    }
}