webpack-plugin-react-pages

Webpack plugin port of vite-plugin-pages

Only support react, check playground for more details. Plugin use remix route style by default.

install

pnpm i webpack-plugin-react-pages react-router react-router-dom

usage

const { WebpackPluginReactPages } = require('webpack-plugin-react-pages')

// in webpack.config.js
{
  plugins: [
    // ...
    new WebpackPluginReactPages(),
  ],
}

Then, import virutal:react-pages module in project

import React, { Suspense } from 'react'
import { BrowserRouter, useRoutes } from 'react-router-dom'

import routes from 'virtual:react-pages'

const Routes = () => {
  const element = useRoutes(routes)
  return element
}

const RouterViewer = () => {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>loading</div>}>
        <Routes />
      </Suspense>
    </BrowserRouter>
  )
}

export default RouterViewer

options

Support follow options from vite-plugin-pages

• resolver
• dirs
• exclude
• importMode
• routeStyle - remix by default
• caseSensitive
• routeBlockLang
• extendRoute
• onRoutesGenerated
• onClientGenerated

options.rspack

• type boolean

compatible with rspack

options.localModuleOptions

• type check webpack-local-module#options for more details

only worked when options.rspack is enabled.

options.namespace

plugin will register $page instance on compiler by default, custom namespace, register instance on compiler[namespace].$page

options.resolveModuleId

By default, plugin will replace virtual: -> virtual- when resolver.resolveModuleId() modules contain virtual: protocol. If you want to custom this behavior, you can pass options.resolveModuleId function to plugin.

TypeScript

make virutal:react-pages type safe.

{
  "types": ["webpack-plugin-react-pages/shim"]
}

built-in resolvers

webpack-plugin-react-pages also built-in custom resolvers

• nextEnhancedResolver - next.js route convention mixup remix route convention