webpack-fs-routes-plugin

Next.js style file system routes https://nextjs.org/docs/routing/introduction.

Examples

index route
    pages/index.js → /
    pages/blog/index.js → /blog
nested route
    pages/blog/first-post.js → /blog/first-post
    pages/dashboard/settings/username.js → /dashboard/settings/username
dynamic route
    pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
    pages/[username]/settings.js → /:username/settings (/foo/settings)
    pages/post/[...all].js → /post/* (/post/2020/id/title)

Install

npm i webpack-fs-routes-plugin

Usage

import WebpackFsRoutesPlugin from 'webpack-fs-routes-plugin'

export interface UserOptions {
  /**
   * The path to the directory containing your page routes
   * @default <rootDir>/src/pages
   */
  routesDir?: string
  /**
   * Supported file extensions for page routes
   * @default ['.tsx']
   */
  routeExtensions?: string[]
  /**
   * Development build
   * @default false
   */
  isDev?: boolean
  /**
   * @default false
   */
  caseSensitive?: boolean
  /**
   * @default 5
   */
  reactRouterVersion?: 5 | 6
}
const options: UserOptions = {}

export default {
  // ...
  plugins: [
    WebpackFsRoutesPlugin(options),
  ],
}

Or checkout config-overrides.js in examples/.

---

Sponsors

License

MIT © lxy-yz