swc-loader

该模块允许你将 SWC 与 webpack 一起使用。

¥This module allows you to use SWC with webpack.

对于 Rspack 用户，可以使用 Rspack 的 builtin:swc-loader (opens in a new tab)，而无需安装 swc-loader 包。

¥For Rspack users, you can use Rspack's builtin:swc-loader (opens in a new tab), without the need to install the swc-loader package.

安装

¥Installation

pnpm i -D @swc/core swc-loader

用法

¥Usage

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules)/,
      use: {
        // `.swcrc` can be used to configure swc
        loader: "swc-loader"
      }
    }
  ]
}

选项

¥Options

加载器选项将传递到 SWC，就像它们是 .swcrc 的一部分一样。

¥Loader options are passed through to SWC as if they were part of your .swcrc.

例如，配置基于 browserslist 的 targets 进行编译 (opens in a new tab) 并查看效果：

¥For instance, to configure browserslist-based targets for compilation (opens in a new tab) and see the effect:

{
  use: {
    loader: "swc-loader",
    options: {
      env: {
        targets: "defaults",
        debug: true
      }
    }
  }
}

React 开发

¥React Development

jsc.transform.react.development 选项是根据 Webpack mode (opens in a new tab) 自动设置的。

¥The jsc.transform.react.development option is automatically set based on the webpack mode (opens in a new tab).

使用 babel-loader

¥With babel-loader

当与 babel-loader 一起使用时，parseMap 选项必须设置为 true。

¥When used with babel-loader, the parseMap option must be set to true.

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules)/,
      use: {
        loader: "swc-loader",
        options: {
          parseMap: true
        }
      }
    }
  ]
}