Chapter 86: Webpack and Rspack

Core Idea

Remotion bundles your project before opening the Studio or rendering media. It supports Webpack and Rspack.

Key Concepts

• Bundler roadmap
• Enable Rspack<AvailableFrom v="4.0.426" />
• Override the bundler configuration
• Webpack overrides in remotion.config.ts
• Rspack overrides in remotion.config.ts<AvailableFrom v="4.0.498" />
• When using bundle()
• Multiple overrides
• Snippets

Code Examples

Config.setRspack(true);

• What it demonstrates: Usage pattern for Webpack and Rspack from the official docs.

Reference Tables

API	When it runs
Config.overrideBundlerConfig()	With either selected bundler. Runs first.
Config.overrideWebpackConfig()	Only when Webpack is selected. Runs after the shared override.
Config.overrideRspackConfig()	Only when Rspack is selected. Runs after the shared override.

Key Takeaways

1. Understand bundler roadmap when working with Webpack and Rspack.
2. Understand enable rspack<availablefrom v="4.0.426" /> when working with Webpack and Rspack.
3. Understand override the bundler configuration when working with Webpack and Rspack.
4. Understand webpack overrides in remotion.config.ts when working with Webpack and Rspack.
5. Understand rspack overrides in remotion.config.ts<availablefrom v="4.0.498" /> when working with Webpack and Rspack.

Connects To

• Authoring Packages: related page in the CLI & Bundling section.
• Bundle: related page in the CLI & Bundling section.
• Bundler: related page in the CLI & Bundling section.