Webpack Plugin
Webpack plugin for TanStack Router with route generation and code splitting.
Installation
npm install @tanstack/router-plugin
Basic Usage
// webpack.config.js
const { TanStackRouterWebpack } = require('@tanstack/router-plugin/webpack')
module.exports = {
plugins: [
TanStackRouterWebpack()
]
}
Configuration Options
Same options as the Vite plugin:
Directory containing route files.Default: './src/routes'
Output path for generated route tree.Default: './src/routeTree.gen.ts'
Prefix to ignore when generating routes.Default: '-'
Enable automatic code splitting.Default: false
Code splitting configuration.
Examples
Basic Setup
// webpack.config.js
const { TanStackRouterWebpack } = require('@tanstack/router-plugin/webpack')
module.exports = {
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
TanStackRouterWebpack()
],
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
}
}
With Code Splitting
const { TanStackRouterWebpack } = require('@tanstack/router-plugin/webpack')
module.exports = {
plugins: [
TanStackRouterWebpack({
autoCodeSplitting: true,
codeSplittingOptions: {
defaultBehavior: [
['component'],
['loader'],
['pendingComponent', 'errorComponent']
]
}
})
],
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
TypeScript Configuration
const { TanStackRouterWebpack } = require('@tanstack/router-plugin/webpack')
module.exports = {
plugins: [
TanStackRouterWebpack({
routesDirectory: './src/pages',
generatedRouteTree: './src/pages/routeTree.gen.ts',
quoteStyle: 'double',
semicolons: true
})
]
}
Production Optimization
const { TanStackRouterWebpack } = require('@tanstack/router-plugin/webpack')
module.exports = {
mode: 'production',
plugins: [
TanStackRouterWebpack({
autoCodeSplitting: true,
codeSplittingOptions: {
defaultBehavior: [
['component'],
['loader'],
['pendingComponent', 'errorComponent']
]
}
})
],
optimization: {
minimize: true,
splitChunks: {
chunks: 'all',
cacheGroups: {
routes: {
test: /[\\/]routes[\\/]/,
priority: -10
}
}
}
}
}