Lesson 24 / 31
SWC in Webpack, Vite, and Next.js
See how SWC is used in Next.js, Webpack with swc-loader and Vite alongside esbuild.
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 uses esbuild for transpilation and is moving to Rolldown and Oxc, which are also Rust-based and very fast. SWC is an alternative via plugins if you need its specific features.