Chapter 10: With Webpack

Core Idea

File-based routing under Webpack installs @tanstack/router-plugin and adds tanstackRouter from @tanstack/router-plugin/webpack directly to webpack.config.ts's plugins array; Solid additionally requires a .babelrc with babel-preset-solid since SWC does not support Solid, and the same defaults/ignore-file guidance from the Vite chapter apply.

Key Concepts

• @tanstack/router-plugin/webpack: The Webpack-specific entry point for the plugin.
• Simpler plugin registration: Unlike Vite/Rspack, Webpack just takes tanstackRouter({ target: 'react', autoCodeSplitting: true }) directly in the top-level plugins array, no framework-plugin ordering concern is documented.
• Solid's .babelrc requirement: { "presets": ["babel-preset-solid", "@babel/preset-typescript"] } is needed because SWC doesn't support solid-js.
• Same defaults: routesDirectory: "./src/routes", generatedRouteTree: "./src/routeTree.gen.ts", routeFileIgnorePrefix: "-", quoteStyle: "single".
• Same ignore-file guidance: Identical Prettier/ESLint/Biome/VSCode readonly recommendations as Vite and Rspack.

Code Examples

// webpack.config.ts
import { tanstackRouter } from '@tanstack/router-plugin/webpack'

export default {
  plugins: [
    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
    }),
  ],
}

• What it demonstrates: Minimal Webpack config registering the TanStack Router plugin for file-based routing with auto code splitting.

Key Takeaways

1. Webpack setup is the simplest of the bundler integrations, a single plugin entry with no ordering caveats documented.
2. Solid on Webpack needs babel-preset-solid configured via .babelrc, since SWC's Solid support is absent.
3. Configuration defaults and the need to ignore routeTree.gen.ts in tooling are consistent across all bundler integrations (Vite, Rspack, Webpack, Esbuild).

Connects To

• Ch 8: With Vite and Ch 9: With Rspack cover the same plugin package for other bundlers.
• Ch 11: With Esbuild is the remaining bundler-specific integration.