Lesson 24 / 30

SWC in Webpack, Vite, and Next.js

See SWC integrated in modern build tools.

Next.js 13+: SWC by default

Next.js 13+ uses SWC as the default transpiler, replacing Babel. Builds are significantly faster with no configuration needed.

Configuring SWC in Webpack

Use swc-loader for Webpack to transpile with SWC instead of Babel.

// webpack.config.js
module: {
  rules: [
    {
      test: /\.(?:j|t)sx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'swc-loader',
        options: {
          jsc: { parser: { syntax: 'typescript' } }
        }
      }
    }
  ]
}

Vite uses esbuild, which also transpiles fast

Vite defaults to esbuild for transpilation (also Rust-based and very fast). SWC is an alternative if you prefer. Both are modern, high-performance choices.