childrentime / awesome-rspack

A curated list of awesome things related to Rspack, Rsbuild and Rspress

A curated list of awesome things related to Rspack and its ecology

Awesome Rspack

• Resources
  • Official Resources
  • Ecosystem
• Starter
  • Rspack Starter
  • Rsbuild Starter
• Plugins
  • Rspack Plugins
  • Rsbuild Plugins
  • Rspress Plugins
• Libraries
• License

Resources

Official Resources

• Rspack Doc
• Rspack GitHub Repo
• Rspack Release Notes
• Rspack Examples: Examples for Rspack, Rsbuild, Rspress and Rsdoctor.
• Rsfamily Design Resources: Design resources for Rspack, Rsbuild, Rspress and Rsdoctor.

Ecosystem

• Rsbuild: The Rspack-based build tool.
• Rspress: A fast Rspack-based static site generator.
• Rsdoctor: A one-stop build analyzer for Rspack and Webpack.
• Modern.js: A progressive React framework for web development.
• storybook-rsbuild: Storybook builder powered by Rsbuild.
• @nx/rspack: The Nx plugin for Rspack.

Starter

Rspack Starter

• rspack-react-router-starter
• rspack for create-react-app
• electron-forge-rspack-template
• shark: A React project with Rspack, Ant Design, Ant Design Pro Components, Antd@5 React@18 AntV G2Plot, ahooks, react-use, Axios, i18next, localforage, Mock.js, NProgress, and more.
• electron-react-rspack: An Electron boilerplate including TypeScript, React, Rspack and ESLint.

Rsbuild Starter

• rsbuild_vue3_h5_template: A project template for Vue 3. It includes popular libraries such as Axios, Pinia, Vant, and Vue Router.
• rsbuild-chrome-extension-boilerplate-react: Chrome extension boilerplate for Rsbuild.
• rsbuild-plugin-template: Use this template to create your own Rsbuild plugin.

Plugins

Rspack Plugins

• rspack-manifest-plugin: A Rspack plugin for generating an asset manifest.
• rspack-plugin-dotenv: A secure rspack plugin that supports dotenv and other environment variables.
• rspack-plugin-virtual-module: A plugin for rspack that allows you to create virtual modules.
• rspack-plugin-prefresh: Hot Module Reloading for Preact on Rspack.
• html-rspack-plugin: Generate files to serve your Rspack bundles.
• @aaroon/workbox-rspack-plugin: A plugin to use workbox in Rspack.
• inject-manifest-plugin: Injects a Workbox PWA manifest into a Service Worker.

Rspack and Rsbuild support most of the webpack plugins, such as:

• case-sensitive-paths-webpack-plugin: Enforces case sensitive paths of all required modules.
• clean-webpack-plugin: Remove your build folder before building.
• compression-webpack-plugin: Prepare compressed versions of assets to serve them with Content-Encoding.
• css-minimizer-webpack-plugin: Uses cssnano to optimize and minify your CSS.
• eslint-webpack-plugin: Uses eslint to find and fix problems in your JavaScript code.
• fork-ts-checker-webpack-plugin: Runs TypeScript type checker on a separate process.
• html-webpack-plugin: Simplifies creation of HTML files to serve your bundles.
• webpack-bundle-analyzer: Visualize size of webpack output files with an interactive zoomable treemap.
• @vanilla-extract/webpack-plugin: Integrating vanilla-extract with webpack / Rspack.
• @sentry/webpack-plugin: Provides source map and release management support for Sentry.

Rspack and Rsbuild support most of the webpack loaders, such as:

• babel-loader: Transpiling JavaScript files using Babel.
• css-loader: Interprets @import and url() in CSS files and resolve them.
• sass-loader: Compiles Sass/SCSS files to CSS.
• less-loader: Compiles Less to CSS.
• stylus-loader: Compiles Stylus to CSS.
• postcss-loader: Loader to process CSS with PostCSS.
• style-loader: Inject CSS into the DOM.
• html-loader: Exports HTML as string.
• vue-loader: Loader for Vue Single-File Components.
• svelte-loader: Loader for svelte components.
• imports-loader: Use modules that depend on specific global variables.
• source-map-loader: Extracts source maps from existing source files.
• svg-react-loader: Turn SVGs into React Components.
• svgo-loader: Loader for SVGO.
• coffee-loader: Compile CoffeeScript to JavaScript.
• node-loader: Allows to connect native node modules with .node extension.
• @mdx-js/loader: Loader for MDX.
• @svgr/webpack: Loader for SVGR.
• yaml-loader: Allows importing YAML files as JS objects.
• react-compiler-webpack: The webpack / Rspack loader for React Compiler.
• worker-rspack-loader: An Rspack loader that registers a script as a Web Worker.

Rspack and Rsbuild support most of the unplugin, such as:

• unplugin-vue-components: On-demand components auto importing for Vue.
• unplugin-auto-import: Auto import APIs on-demand.
• unplugin-stylex: StyleX integration for Rspack.
• @arco-plugins/unplugin-react: A plugin to help you use Arco Design React.
• @tanstack/router-plugin: Automatically generate configuration for TanStack Router.
• unplugin-build-info: Print the build information on the console.

Rsbuild Plugins

• @rsbuild/plugin-react: Provides support for React.
• @rsbuild/plugin-svgr: Support convert SVG to React components.
• @rsbuild/plugin-styled-components: Provides compile-time support for styled-components.
• @rsbuild/plugin-vue: Provides support for Vue 3 SFC (Single File Components).
• @rsbuild/plugin-vue-jsx: Provides support for Vue 3 JSX / TSX syntax.
• @rsbuild/plugin-vue2: Provides support for Vue 2 SFC (Single File Components).
• @rsbuild/plugin-vue2-jsx: Provides support for Vue 2 JSX / TSX syntax.
• @rsbuild/plugin-preact: Provides support for Preact.
• @rsbuild/plugin-svelte: Provides support for Svelte components (.svelte files).
• @rsbuild/plugin-assets-retry: Used to automatically resend requests when static assets fail to load.
• @rsbuild/plugin-babel: Provides support for Babel transpilation capabilities.
• @rsbuild/plugin-basic-ssl: Generate an untrusted, self-signed certificate for the HTTPS server.
• @rsbuild/plugin-eslint: Used to run ESLint checks during the compilation.
• @rsbuild/plugin-type-check: Used to run TypeScript type checker on a separate process.
• @rsbuild/plugin-image-compress: Compress the image resources used in the project.
• @rsbuild/plugin-mdx: Provide support for MDX.
• @rsbuild/plugin-node-polyfill: Used to inject polyfills of Node core modules in the browser side.
• @rsbuild/plugin-lightningcss: Used to use LightningCSS as CSS transformer and minimizer.
• @rsbuild/plugin-source-build: This plugin is designed for the monorepo scenario. It supports referencing source code from other subdirectories and performs build and hot update.
• @rsbuild/plugin-stylus: Use Stylus as the CSS preprocessor.
• @rsbuild/plugin-check-syntax: Used to analyze the syntax compatibility of artifacts, to see if there are any advanced syntaxes that may cause compatibility issues.
• @rsbuild/plugin-css-minimizer: Used to customize CSS minimizer, switch to cssnano or other tools for CSS compression.
• @rsbuild/plugin-typed-css-modules: Generate TypeScript declaration files for CSS Modules.
• @rsbuild/plugin-pug: Provides support for the Pug template engine.
• @rsbuild/plugin-rem: Implements the rem adaptive layout for mobile pages.
• @rsbuild/plugin-umd: Used to build outputs in UMD format.
• @rsbuild/plugin-yaml: Used to import YAML files and convert them into JavaScript objects.
• @rsbuild/plugin-toml: Used to import TOML files and convert them into JavaScript objects.
• @rsbuild/plugin-solid: Provides support for Solid.
• rsbuild-plugin-react-inspector: Allows automatic jumping to the local IDE when clicking on a browser element.
• rsbuild-plugin-svelte-inspector: Allows automatic jumping to the local IDE when clicking on a browser element.
• rsbuild-plugin-vue-inspector: Allows automatic jumping to the local IDE when clicking on a browser element.
• rsbuild-plugin-print: Print text, show host with qrcode.
• rsbuild-plugin-console-debug: Output debug information in the console.
• rsbuild-plugin-generate-file: Generate static file and write them to dist folder after packaging.
• rsbuild-plugin-google-analytics: Setup Google Analytics in your website.
• rsbuild-plugin-web-extension: Rsbuild plugin for Chrome/web extension.
• rsbuild-plugin-open-graph: Generate Open Graph meta tags.
• rsbuild-plugin-posthog: Rsbuild plugin for PostHog.
• rsbuild-plugin-vue-legacy: Support for Vue versions below 2.7 by setting an alias for vue.
• @webx-kit/rsbuild-plugin: Rsbuild plugin for Web eXtension development.

Rspress Plugins

• @rspress/plugin-medium-zoom: medium-zoom plugin, used to zoom in images.
• @rspress/plugin-last-updated: Support for displaying the last update time of the article.
• @rspress/plugin-container-syntax: Support container syntax in Markdown/MDX.
• @rspress/plugin-typedoc: Integrate TypeDoc, used to generate API documentation of TS module automatically.
• @rspress/plugin-preview: Support preview of code blocks in Markdown/MDX.
• @rspress/plugin-playground: Provide a real-time playground to preview the code blocks in Markdown/MDX files.
• @rspress/plugin-shiki: Integrates Shiki for code syntax highlighting.
• @rspress/plugin-rss: Generates RSS files for specific document pages with feed.
• rspress-plugin-translate: Automatically translate your content behind the scenes using GPT's.
• rspress-plugin-shiki: Rspress plugin shiki with transformer.
• rspress-plugin-remote-page: Load remote markdown file (e.g. README.md) onto your website.
• rspress-plugin-font-open-sans: Use Open Sans as the default font in your Rspress website.
• rspress-plugin-align-image: Rspress plugin to align images in markdown.
• rspress-plugin-directives: Rspress plugin for custom directives support.
• rspress-plugin-file-tree: Rspress plugin that add tree view for file structure display.
• rspress-plugin-gh-pages: Rspress plugin to add support for automatic deployment to GitHub Pages.
• rspress-plugin-google-analytics: Rspress plugin for Google Analytics integration.
• rspress-plugin-vercel-analytics: Rspress plugin for Vercel Analytics integration.
• rspress-plugin-katex: Rspress plugin to add support for rendering math equations using KaTeX.
• rspress-plugin-live2d: Rspress plugin for live2d, powered by on-my-live2d.
• rspress-plugin-mermaid: Rspress plugin to render Mermaid diagrams in markdown files.
• rspress-plugin-reading-time: Rspress plugin to display reading time for your document pages.
• rspress-plugin-supersub: Rspress plugin to add superscript(<super></super>) and subscript(<sub></sub>) support.
• rspress-plugin-toc: Rspress plugin that injects a table of contents into the page.
• rspress-plugin-clarity: Rspress plugin for Clarity integration.
• rspress-plugin-sitemap: Automatically generate SEO-related sitemaps.
• rspress-plugin-mention-github: Rspress plugin mention github user, or any link.

Libraries

• rspack-chain: A chaining API to generate and simplify the modification of Rspack configurations.

License

To the extent possible under law, Web Infra has waived all copyright and related or neighboring rights to this work.