# Table of Contents - [Rspack](#rspack) - [Command line interface - Rspack](#command-line-interface-rspack) - [SWC 插件版本不匹配 - Rspack](#swc-rspack) - [SWC plugin version mismatch - Rspack](#swc-plugin-version-mismatch-rspack) - [常见问题 - Rspack](#-rspack) - [FAQ - Rspack](#faq-rspack) - [Announcing Rspack 0.1 - Rspack](#announcing-rspack-0-1-rspack) - [Rspack 0.6 发布公告 - Rspack](#rspack-0-6-rspack) - [Announcing Rspack 1.0 alpha - Rspack](#announcing-rspack-1-0-alpha-rspack) - [Rspack 正式发布了 - Rspack](#rspack-rspack) - [路线图 - Rspack](#-rspack) - [Rspack 1.1 发布公告 - Rspack](#rspack-1-1-rspack) - [Rspack 支持模块联邦 - Rspack](#rspack-rspack) - [Rspack 1.0 alpha 发布公告 - Rspack](#rspack-1-0-alpha-rspack) - [Announcing Rspack 0.7 - Rspack](#announcing-rspack-0-7-rspack) - [Rspack 加入 Next.js 生态 - Rspack](#rspack-next-js-rspack) - [Rspack joins the Next.js ecosystem - Rspack](#rspack-joins-the-next-js-ecosystem-rspack) - [Announcing Rspack 0.6 - Rspack](#announcing-rspack-0-6-rspack) - [Rspack 0.3 发布公告 - Rspack](#rspack-0-3-rspack) - [Rspack 0.7 发布公告 - Rspack](#rspack-0-7-rspack) - [Module Federation added to Rspack - Rspack](#module-federation-added-to-rspack-rspack) - [Announcing Rspack 1.2 - Rspack](#announcing-rspack-1-2-rspack) - [Announcing Rspack 0.3 - Rspack](#announcing-rspack-0-3-rspack) - [Announcing Rspack 1.1 - Rspack](#announcing-rspack-1-1-rspack) - [Announcing Rspack 0.5 - Rspack](#announcing-rspack-0-5-rspack) - [Announcing Rspack 0.2 - Rspack](#announcing-rspack-0-2-rspack) - [Rspack 0.5 发布公告 - Rspack](#rspack-0-5-rspack) - [版权声明 - Rspack](#-rspack) - [License - Rspack](#license-rspack) - [Rspack 0.2 发布公告 - Rspack](#rspack-0-2-rspack) - [Roadmap - Rspack](#roadmap-rspack) - [Rspack 1.2 发布公告 - Rspack](#rspack-1-2-rspack) - [Rspack 0.4 发布公告 - Rspack](#rspack-0-4-rspack) - [Announcing Rspack 1.7 - Rspack](#announcing-rspack-1-7-rspack) - [Rspack 1.7 发布公告 - Rspack](#rspack-1-7-rspack) - [品牌指南 - Rspack](#-rspack) - [功能演进与废弃 - Rspack](#-rspack) - [荣誉成员 - Rspack](#-rspack) - [Branding guideline - Rspack](#branding-guideline-rspack) - [Future behavior - Rspack](#future-behavior-rspack) - [Emeriti members - Rspack](#emeriti-members-rspack) - [Announcing Rspack 1.3 - Rspack](#announcing-rspack-1-3-rspack) - [Rspack 1.3 发布公告 - Rspack](#rspack-1-3-rspack) - [核心团队 - Rspack](#-rspack) - [Core team - Rspack](#core-team-rspack) - [Announcing Rspack 0.4 - Rspack](#announcing-rspack-0-4-rspack) - [Rspack 1.6 发布公告 - Rspack](#rspack-1-6-rspack) - [Rspack 2.1 发布公告 - Rspack](#rspack-2-1-rspack) - [Announcing Rspack 1.4 - Rspack](#announcing-rspack-1-4-rspack) - [Announcing Rspack 1.5 - Rspack](#announcing-rspack-1-5-rspack) - [Rspack loader - Rspack](#rspack-loader-rspack) - [贡献指南 - Rspack](#-rspack) - [Releasing - Rspack](#releasing-rspack) - [Rspack 1.4 发布公告 - Rspack](#rspack-1-4-rspack) - [Rspack 1.5 发布公告 - Rspack](#rspack-1-5-rspack) - [Announcing Rspack 2.1 - Rspack](#announcing-rspack-2-1-rspack) - [Join us - Rspack](#join-us-rspack) - [Debugging - Rspack](#debugging-rspack) - [Announcing Rspack 1.0 - Rspack](#announcing-rspack-1-0-rspack) - [Rspack 1.0 发布公告 - Rspack](#rspack-1-0-rspack) - [加入我们 - Rspack](#-rspack) - [Glossary - Rspack](#glossary-rspack) - [Tracing - Rspack](#tracing-rspack) - [Rspack loader - Rspack](#rspack-loader-rspack) - [术语表 - Rspack](#-rspack) - [Prerequisites - Rspack](#prerequisites-rspack) - [准备工作 - Rspack](#-rspack) - [Project architecture - Rspack](#project-architecture-rspack) - [项目结构 - Rspack](#-rspack) - [Builtin 插件 - Rspack](#builtin-rspack) - [Builtin plugin - Rspack](#builtin-plugin-rspack) - [Releasing - Rspack](#releasing-rspack) - [Introduction - Rspack](#introduction-rspack) - [Contributing guide - Rspack](#contributing-guide-rspack) - [Building - Rspack](#building-rspack) - [Profiling - Rspack](#profiling-rspack) - [Testing - Rspack](#testing-rspack) - [Testing - Rspack](#testing-rspack) - [Building - Rspack](#building-rspack) - [Debugging - Rspack](#debugging-rspack) - [Announcing Rspack 1.6 - Rspack](#announcing-rspack-1-6-rspack) - [Profiling - Rspack](#profiling-rspack) - [Tracing - Rspack](#tracing-rspack) - [JavaScript API architecture - Rspack](#javascript-api-architecture-rspack) - [Announcing Rspack 2.0 - Rspack](#announcing-rspack-2-0-rspack) - [Rspack 2.0 正式发布 - Rspack](#rspack-2-0-rspack) - [Browser API - Rspack](#browser-api-rspack) - [Cache - Rspack](#cache-rspack) - [Rspack blogs - Rspack](#rspack-blogs-rspack) - [Resolver API - Rspack](#resolver-api-rspack) - [Rspack 博客 - Rspack](#rspack-rspack) - [JavaScript API - Rspack](#javascript-api-rspack) - [Compilation - Rspack](#compilation-rspack) - [Logger - Rspack](#logger-rspack) - [SWC API - Rspack](#swc-api-rspack) - [Compiler - Rspack](#compiler-rspack) - [Inline matchResource - Rspack](#inline-matchresource-rspack) - [Overview - Rspack](#overview-rspack) - [Inline loaders - Rspack](#inline-loaders-rspack) - [Stats - Rspack](#stats-rspack) - [Overview - Rspack](#overview-rspack) - [Stats JSON - Rspack](#stats-json-rspack) - [Rspack](#rspack) - [ExternalModule 钩子 - Rspack](#externalmodule-rspack) - [SWC API - Rspack](#swc-api-rspack) - [NormalModuleFactory 钩子 - Rspack](#normalmodulefactory-rspack) - [Context - Rspack](#context-rspack) - [总览 - Rspack](#-rspack) - [Node - Rspack](#node-rspack) - [ExternalModule hooks - Rspack](#externalmodule-hooks-rspack) - [Cache - Rspack](#cache-rspack) - [ResolveLoader - Rspack](#resolveloader-rspack) - [文件名占位符 - Rspack](#-rspack) - [LazyCompilation - Rspack](#lazycompilation-rspack) - [其他配置 - Rspack](#-rspack) - [JavascriptModulesPlugin - Rspack](#javascriptmodulesplugin-rspack) - [RuntimePlugin hooks - Rspack](#runtimeplugin-hooks-rspack) - [JavaScript API 架构 - Rspack](#javascript-api-rspack) - [Filename placeholders - Rspack](#filename-placeholders-rspack) - [LazyCompilation - Rspack](#lazycompilation-rspack) - [Compilation hooks - Rspack](#compilation-hooks-rspack) - [Resolver API - Rspack](#resolver-api-rspack) - [内联 loader - Rspack](#-loader-rspack) - [Performance - Rspack](#performance-rspack) - [JavascriptModulesPlugin 钩子 - Rspack](#javascriptmodulesplugin-rspack) - [废弃选项 - Rspack](#-rspack) - [Performance - Rspack](#performance-rspack) - [Deprecated options - Rspack](#deprecated-options-rspack) - [Entry - Rspack](#entry-rspack) - [ContextModuleFactory - Rspack](#contextmodulefactory-rspack) - [Entry - Rspack](#entry-rspack) - [编写 Loader - Rspack](#-loader-rspack) - [Experiments - Rspack](#experiments-rspack) - [Compiler hooks - Rspack](#compiler-hooks-rspack) - [Devtool - Rspack](#devtool-rspack) - [Experiments - Rspack](#experiments-rspack) - [Cache - Rspack](#cache-rspack) - [Cache - Rspack](#cache-rspack) - [ContextModuleFactory 钩子 - Rspack](#contextmodulefactory-rspack) - [内联 matchResource - Rspack](#-matchresource-rspack) - [RuntimePlugin 钩子 - Rspack](#runtimeplugin-rspack) - [Stats 钩子 - Rspack](#stats-rspack) - [InfrastructureLogging - Rspack](#infrastructurelogging-rspack) - [Stats hooks - Rspack](#stats-hooks-rspack) - [InfrastructureLogging - Rspack](#infrastructurelogging-rspack) - [命令行工具 - Rspack](#-rspack) - [Stats - Rspack](#stats-rspack) - [Compilation 钩子 - Rspack](#compilation-rspack) - [Plugins - Rspack](#plugins-rspack) - [配置 Rspack - Rspack](#-rspack-rspack) - [Hot module replacement - Rspack](#hot-module-replacement-rspack) - [Configure Rspack - Rspack](#configure-rspack-rspack) - [模块热替换 - Rspack](#-rspack) - [Watch - Rspack](#watch-rspack) - [Watch - Rspack](#watch-rspack) - [Stats JSON - Rspack](#stats-json-rspack) - [Stats - Rspack](#stats-rspack) - [Stats - Rspack](#stats-rspack) - [Context - Rspack](#context-rspack) - [Writing loaders - Rspack](#writing-loaders-rspack) - [Extends - Rspack](#extends-rspack) - [Extends - Rspack](#extends-rspack) - [Logger - Rspack](#logger-rspack) - [JavaScript API - Rspack](#javascript-api-rspack) - [Browser API - Rspack](#browser-api-rspack) - [Module methods - Rspack](#module-methods-rspack) - [NormalModuleFactory - Rspack](#normalmodulefactory-rspack) - [Other options - Rspack](#other-options-rspack) - [Target - Rspack](#target-rspack) - [Compiler 钩子 - Rspack](#compiler-rspack) - [模块方法 - Rspack](#-rspack) - [Mode - Rspack](#mode-rspack) - [Node - Rspack](#node-rspack) - [Incremental - Rspack](#incremental-rspack) - [Mode - Rspack](#mode-rspack) - [Target - Rspack](#target-rspack) - [Resolve - Rspack](#resolve-rspack) - [Resolve - Rspack](#resolve-rspack) - [Plugins - Rspack](#plugins-rspack) - [ResolveLoader - Rspack](#resolveloader-rspack) - [Devtool - Rspack](#devtool-rspack) - [Incremental - Rspack](#incremental-rspack) - [Compiler - Rspack](#compiler-rspack) --- # Rspack For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /index.md. ![background](https://assets.rspack.rs/rspack/assets/landingpage-background-compressed.png) ![logo](https://assets.rspack.rs/rspack/rspack-logo.svg) Rspack ====== Fast Rust-based bundler for the web Seamlessly replace webpack with modernized webpack API Get Started[GitHubGitHub](https://github.com/web-infra-dev/rspack) [![Fast Startup](https://rspack.rs/static/svg/Speedometer.e6ce5b2c32.svg)\ \ ### Fast Startup\ \ Parallelized Rust architecture for ultimate developer experience](https://rspack.rs/guide/start/introduction) [![Lightning HMR](https://rspack.rs/static/svg/Lightning.7b8c41ecd3.svg)\ \ ### Lightning HMR\ \ Built-in incremental build for superior HMR performance](https://rspack.rs/guide/start/introduction) [![Framework Agnostic](https://rspack.rs/static/svg/FrameCheck.ccc904a9ef.svg)\ \ ### Framework Agnostic\ \ Works with any frontend UI framework](https://rspack.rs/guide/tech/react) [![Webpack Compatible]()\ \ ### Webpack Compatible\ \ Compatible with webpack plugins and loaders from community](https://rspack.rs/guide/compatibility/plugin) Lightning Fast ============== Combining Rust and TypeScript with a parallelized architecture to bring you the enjoyable developer experience Rspack 1.36s dev 3.35s build 160ms hmr Vite 6.50s dev 1.98s build 130ms hmr webpack 21.40s dev 28.10s build 2.78s hmr [See benchmark details](https://github.com/rstackjs/build-tools-performance) Fully Featured ============== Launched as a drop-in replacement for webpack, with more powerful features and exceptional productivity [![0]()\ \ Code Splitting\ --------------\ \ Split code into smaller bundles to enable on-demand loading and improve performance.](https://rspack.rs/guide/optimization/code-splitting) [![1]()\ \ Tree Shaking\ ------------\ \ Detect and eliminate unused code from the final bundles to reduce output size.](https://rspack.rs/guide/optimization/tree-shaking) [![2]()\ \ Plugins\ -------\ \ Offer rich plugin hooks and compatibility with most webpack plugins.](https://rspack.rs/guide/features/plugin) [![3](https://rspack.rs/static/svg/moduleFederation.84a325aa99.svg)\ \ Module Federation\ -----------------\ \ Share code between web applications and collaborate more efficiently.](https://rspack.rs/guide/features/module-federation) [![0]()\ \ Asset Management\ ----------------\ \ Handles and optimizes static assets like images, fonts and stylesheets.](https://rspack.rs/guide/features/asset-module) [![1]()\ \ Loaders\ -------\ \ Fully compatible with webpack loaders, reusing the entire ecosystem.](https://rspack.rs/guide/features/loader) [![2]()\ \ HMR\ ---\ \ Hot updating of modules at runtime without the need for a full refresh.](https://rspack.rs/api/runtime-api/hmr) [![3]()\ \ Dev Server\ ----------\ \ Provides a mature, high-performance dev server for local development.](https://rspack.rs/guide/features/dev-server) [![0]()\ \ Parallel Builds\ ---------------\ \ Run multiple builds in parallel for different build targets or environments.](https://rspack.rs/api/javascript-api/#multicompiler) [![1](https://rspack.rs/static/svg/swc.36b5f8b0b1.svg)\ \ SWC\ ---\ \ Utilizes the Rust-based SWC for faster JavaScript and TypeScript transpilation.](https://rspack.rs/guide/features/builtin-swc-loader) [![2]()\ \ Lightning CSS\ -------------\ \ Integrate Lightning CSS for fast CSS processing and advanced optimizations.](https://rspack.rs/plugins/rspack/lightning-css-minimizer-rspack-plugin) [![3]()\ \ JavaScript API\ --------------\ \ Provides programmatic access to the build API to customize the build processes.](https://rspack.rs/api/javascript-api/) Rstack ====== The fast, unified JavaScript toolchain for developers and agents [![Rspack](https://assets.rspack.rs/rspack/rspack-logo.svg)\ \ Rspack\ \ A fast Rust-based bundler for the web, with a modernized webpack API\ \ rspack.rs](https://rspack.rs/) [![Rsbuild](https://assets.rspack.rs/rsbuild/rsbuild-logo.svg)\ \ Rsbuild\ \ A fast, extensible build tool for modern web development, powered by Rspack\ \ rsbuild.rs](https://rsbuild.rs/) [![Rslib](https://assets.rspack.rs/rslib/rslib-logo.svg)\ \ Rslib\ \ An Rsbuild-based library development tool for creating libraries and UI components\ \ rslib.rs](https://rslib.rs/) [![Rspress](https://assets.rspack.rs/rspress/rspress-logo-480x480.png)\ \ Rspress\ \ An Rsbuild-based static site generator for creating documentation sites\ \ rspress.rs](https://rspress.rs/) [![Rsdoctor](https://assets.rspack.rs/rsdoctor/rsdoctor-logo-480x480.png)\ \ Rsdoctor\ \ An AI-friendly build analyzer that makes the build process transparent\ \ rsdoctor.rs](https://rsdoctor.rs/) [![Rstest](https://assets.rspack.rs/rstest/rstest-logo.svg)\ \ Rstest\ \ A JavaScript testing framework powered by Rspack, with a Jest-compatible API\ \ rstest.rs](https://rstest.rs/) [![Rslint](https://assets.rspack.rs/rslint/rslint-logo.svg)\ \ Rslint\ \ A high-performance, ESLint-compatible linter for JavaScript and TypeScript\ \ rslint.rs](https://rslint.rs/) Trusted By Innovators --------------------- [![Microsoft](https://rspack.rs/static/svg/microsoft.063aca0f2a.svg)](https://www.microsoft.com/) [![Amazon](https://rspack.rs/static/svg/amazon.6fba21b2c9.svg)](https://amazon.com/) [![ByteDance](https://rspack.rs/static/svg/bytedance.680c2fd62d.svg)](https://www.bytedance.com/) [![TikTok]()](https://www.tiktok.com/) [![Google]()](https://google.com/) [![GitHub]()](https://github.com/) [![Alibaba](https://rspack.rs/static/svg/alibaba.6237449d74.svg)](https://www.alibaba.com/) [![bit.dev](https://rspack.rs/static/svg/bit.d7c631e153.svg)bit.dev](https://bit.dev/) [![Intuit]()](https://www.intuit.com/) [![Discord](https://rspack.rs/static/svg/discord.444d0c4288.svg)](https://discord.com/) [![NIO]()](https://nio.com/) [![ABB](https://rspack.rs/static/svg/abb.4369dcad86.svg)](https://abb-bank.az/en) [![Sequoia](https://rspack.rs/static/svg/sequoia.a34c3373e1.svg)](https://www.sequoia.com/) [![Getaround]()](https://getaround.com/) [![Trellis]()](https://trellis.org/) [![Kuaishou]()](https://ir.kuaishou.com/) [![DeepSeek](https://rspack.rs/static/svg/deepseek.ffd6a2bd14.svg)](https://deepseek.com/) [![Khan Academy](https://rspack.rs/static/svg/khan-academy.1dc4c96f14.svg)](https://khanacademy.org/) [![Verkada](https://rspack.rs/static/image/verkada.2f739d8722.png)](https://verkada.com/) [![Miro]()](https://miro.com/) [![Snap](https://rspack.rs/static/svg/snap.bbf5e520f1.svg)](https://www.snap.com/) [![Cloudflare](https://rspack.rs/static/svg/cloudflare.6f1f022a9f.svg)](https://cloudflare.com/) [![YouMind](https://rspack.rs/static/svg/youmind.a6693dacbc.svg)](https://youmind.com/) Guide ----- * [Quick Start](https://rspack.rs/guide/start/quick-start) * [Features](https://rspack.rs/guide/features/asset-module) * [Migration](https://rspack.rs/guide/migration/webpack) * [Compatibility](https://rspack.rs/guide/compatibility/plugin) API --- * [CLI](https://rspack.rs/api/cli) * [Plugin API](https://rspack.rs/api/plugin-api/) * [Loader API](https://rspack.rs/api/loader-api/) * [JavaScript API](https://rspack.rs/api/javascript-api) Toolchain --------- * [Rsbuild](https://rsbuild.rs/) * [Rslib](https://rslib.rs/) * [Rspress](https://rspress.rs/) * [Rsdoctor](https://rsdoctor.rs/) * [Rstest](https://rstest.rs/) Community --------- * [GitHub](https://github.com/web-infra-dev/rspack) * [Discord](https://discord.gg/sYK4QjyZ4V) * [Twitter (X)](https://twitter.com/rspack_dev) * [BlueSky](https://bsky.app/profile/rspack.dev) * [Awesome Rspack](https://github.com/rstackjs/awesome-rstack) --- # Command line interface - Rspack For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /api/cli.md. MenuON THIS PAGE [#](https://rspack.rs/api/cli#command-line-interface) Command line interface ============================================================================ Copy Markdown [@rspack/cli](https://npmjs.com/package/@rspack/cli) is the command line tool for Rspack, providing a variety of commands to make working with Rspack easier. * If you do not have `@rspack/cli` installed, please read the [Quick start](https://rspack.rs/guide/start/quick-start) section first. * If you are using Rsbuild, please refer to the [Rsbuild CLI](https://rsbuild.rs/guide/basic/cli) section. Compatible with webpack-cli `@rspack/cli` is not compatible with `webpack-cli`, so there will be some differences between the two. [#](https://rspack.rs/api/cli#all-commands) All commands -------------------------------------------------------- To view all available CLI commands, run the following command in the project directory: npx rspack -h [#](https://rspack.rs/api/cli#common-flags) Common flags -------------------------------------------------------- Rspack CLI provides several common flags that can be used with all commands: | Flag | Description | | --- | --- | | `-c, --config [value]` | Specify the path to the configuration file, see [Specify the configuration file](https://rspack.rs/config/#specify-the-configuration-file) | | `--configLoader` | Specify the loader to load the config file, can be `auto`, `jiti` or `native`, defaults to `auto` | | `--configName` | Specify the name of the configuration to use. | | `--env ` | Pass environment values to a configuration function. For example, `--env production --env foo=bar` | | `--nodeEnv` | Set the value of `process.env.NODE_ENV`, defaults to `development` for `rspack dev`, and `production` for `rspack build` and `rspack preview` | | `-h, --help` | Show help information | | `-v, --version` | Show version number | Tip All flags in Rspack CLI support the `camelCase` and `kebab-case`, for example, both `--configLoader` and `--config-loader` are valid. [#](https://rspack.rs/api/cli#rspack-build) rspack build -------------------------------------------------------- `rspack build` is used to run Rspack build, which will generate the output files in the [output.path](https://rspack.rs/config/output#outputpath) directory. npx rspack build # Read the `rspack.config.*` configuration file by default `rspack build` can be abbreviated as `rspack b`: npx rspack b Use the `-c` or `--config` flag to specify the configuration file path: npx rspack build -c ./your.config.js The complete flags are as follows: rspack build Options: --entry entry file [array] -o, --outputPath output path dir [string] -m, --mode mode [string] -w, --watch watch [boolean] [default: false] --env env passed to config function [array] -d, --devtool set source map style for debugging [string] --json [path] emit stats json, optionally to the specified path [#](https://rspack.rs/api/cli#rspack-dev) rspack dev ---------------------------------------------------- `rspack dev` is used to run Rspack dev server, which will start a local dev server that will listen for file changes and automatically refresh the browser. Required dependency The `rspack dev` command requires [@rspack/dev-server](https://www.npmjs.com/package/@rspack/dev-server) to be installed. If you haven't installed it yet, run: npm yarn pnpm bun deno npm add @rspack/dev-server -D yarn add @rspack/dev-server -D pnpm add @rspack/dev-server -D bun add @rspack/dev-server -D deno add npm:@rspack/dev-server -D npx rspack dev Use the `-c` or `--config` flag to specify the configuration file path: npx rspack dev -c ./your.config.js `rspack dev` can be abbreviated as `rspack serve` or `rspack s`: npx rspack s npx rspack serve Use `--open` or `--no-open` to override [`devServer.open`](https://rspack.rs/config/dev-server#devserveropen) from the CLI without editing your config file: npx rspack dev --open npx rspack dev --open /my-page npx rspack dev --no-open The complete flags are as follows: rspack dev Options: --entry entry file [array] -o, --outputPath output path dir [string] -m, --mode mode [string] -w, --watch watch [boolean] [default: false] --env env passed to config function [array] -d, --devtool set source map style for debugging [string] --hot enables hot module replacement --port allows to specify a port to use [number] --host allows to specify a hostname to use [string] --open [value] open browser on server start; pass --no-open to disable, or --open to open a specific URL [#](https://rspack.rs/api/cli#rspack-preview) rspack preview ------------------------------------------------------------ `rspack preview` is used to preview the production build output locally, note that you need to build the output first by running the `rspack build` command. Required dependency The `rspack preview` command requires [@rspack/dev-server](https://www.npmjs.com/package/@rspack/dev-server) to be installed. If you haven't installed it yet, run: npm yarn pnpm bun deno npm add @rspack/dev-server -D yarn add @rspack/dev-server -D pnpm add @rspack/dev-server -D bun add @rspack/dev-server -D deno add npm:@rspack/dev-server -D npx rspack preview The complete flags are as follows: rspack preview [dir] run the rspack server for build output Positionals: dir directory want to preview [string] Options: --publicPath static resource server path [string] --port preview server port [number] --host preview server host [string] --open open browser [boolean] --server Configuration items for the server. [string] --- # SWC 插件版本不匹配 - Rspack For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt, and this page is available as Markdown at /zh/errors/swc-plugin-version.md. 菜单目录 [#](https://rspack.rs/zh/errors/swc-plugin-version#swc-%E6%8F%92%E4%BB%B6%E7%89%88%E6%9C%AC%E4%B8%8D%E5%8C%B9%E9%85%8D) SWC 插件版本不匹配 =================================================================================================================================== 复制 Markdown [#](https://rspack.rs/zh/errors/swc-plugin-version#%E9%94%99%E8%AF%AF%E5%87%BA%E7%8E%B0%E7%9A%84%E5%8E%9F%E5%9B%A0) 错误出现的原因 --------------------------------------------------------------------------------------------------------------------------- SWC 的插件仍然是一个实验性功能，目前 SWC 的 Wasm 插件是不向后兼容的，SWC 插件的版本与 Rspack 依赖的 `swc_core` 版本存在强耦合关系。 这意味着，你需要选择和当前 `swc_core` 版本匹配的 SWC 插件，才能使它正常执行。如果你使用的 SWC 插件版本与 Rspack 依赖的 `swc_core` 版本不匹配，Rspack 在执行构建时会抛出如下错误： The version of the SWC Wasm plugin you're using might not be compatible with 'builtin:swc-loader' [#](https://rspack.rs/zh/errors/swc-plugin-version#%E5%8F%AF%E8%83%BD%E7%9A%84%E4%BF%AE%E5%A4%8D%E6%96%B9%E5%BC%8F) 可能的修复方式 --------------------------------------------------------------------------------------------------------------------------- 如果你遇到了以上问题，通常可行的解决方法是将 Rspack 和 SWC 插件都升级到最新版本。 此外，你也可以按照以下步骤来选择合适的 SWC 插件版本： 1. 查看当前使用的 [@rspack/core](https://www.npmjs.com/package/@rspack/core) 版本。 2. 访问 [plugins.swc.rs](https://plugins.swc.rs/) ，选择你当前使用的 Rspack 版本。 3. 该网站会列出你当前使用的 Rspack 版本所匹配的 SWC 插件版本范围，选择匹配的 SWC 插件版本使用即可。 如果你使用的 SWC 插件未收录到 [plugins.swc.rs](https://plugins.swc.rs/) ，你可以通过 Rust 代码仓库中的 Cargo.toml 文件来查看 `swc_core` 的版本信息。 以 Rspack 仓库为例，你可以打开 [Cargo.toml](https://github.com/web-infra-dev/rspack/blob/main/Cargo.toml) ，搜索 `swc_core` 关键字来查看版本，然后参考 [SWC - Selecting the version](https://swc.rs/docs/plugin/selecting-swc-core) 进行选择。 --- # SWC plugin version mismatch - Rspack For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /errors/swc-plugin-version.md. MenuON THIS PAGE [#](https://rspack.rs/errors/swc-plugin-version#swc-plugin-version-mismatch) SWC plugin version mismatch ======================================================================================================== Copy Markdown [#](https://rspack.rs/errors/swc-plugin-version#why-this-error-occurred) Why this error occurred ------------------------------------------------------------------------------------------------ The SWC plugin is still an experimental feature, and the SWC Wasm plugin is currently not backward compatible. The version of the SWC plugin is closely tied to the version of `swc_core` that Rspack depends on. This means that you must to choose an SWC plugin that matches the current version of `swc_core` to ensure that it works properly. If the version of the SWC plugin you are using does not match the version of `swc_core` that Rspack depends on, Rspack will throw the following error during the build process: The version of the SWC Wasm plugin you're using might not be compatible with 'builtin:swc-loader' [#](https://rspack.rs/errors/swc-plugin-version#possible-ways-to-fix-it) Possible ways to fix it ------------------------------------------------------------------------------------------------ If you encounter the above issues, a common solution is to upgrade both the Rspack and SWC plugins to the latest versions. Alternatively, you can follow these steps to select a suitable SWC plugin version: 1. Check the current version of [@rspack/core](https://www.npmjs.com/package/@rspack/core) you are using. 2. Visit [plugins.swc.rs](https://plugins.swc.rs/) and select the version of Rspack you are currently using. 3. The website will list the range of SWC plugin versions that match to your current Rspack version. Then select the matched version of the SWC plugin to use. If the SWC plugin you are using is not listed on [plugins.swc.rs](https://plugins.swc.rs/) , you can find the version information of `swc_core` in the Cargo.toml file within the Rust code repository. For example, in the Rspack repository, you can open [Cargo.toml](https://github.com/web-infra-dev/rspack/blob/main/Cargo.toml) and search for the keyword `swc_core` to find the version. Then read [SWC - Selecting the version](https://swc.rs/docs/plugin/selecting-swc-core) for further guidance. --- # 常见问题 - Rspack For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt, and this page is available as Markdown at /zh/misc/faq.md. 目录 [#](https://rspack.rs/zh/misc/faq#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98) 常见问题 ============================================================================ 复制 Markdown [#](https://rspack.rs/zh/misc/faq#rspack-%E5%92%8C-webpack-%E7%9A%84%E5%85%B3%E7%B3%BB%E6%98%AF%E6%80%8E%E6%A0%B7%E7%9A%84) Rspack 和 webpack 的关系是怎样的？ ----------------------------------------------------------------------------------------------------------------------------------------------------- **我们和 webpack 团队确立了合作关系**，Rspack 是 webpack 通过 Rust 进行性能优化的一个尝试，并已经取得了良好进展。 我们会和 webpack 团队持续探索优化 webpack 的更多可能性。 [#](https://rspack.rs/zh/misc/faq#%E5%85%BC%E5%AE%B9-javascript-%E5%92%8C-webpack-%E7%94%9F%E6%80%81%E4%B8%8D%E4%BC%9A%E5%AD%98%E5%9C%A8%E6%80%A7%E8%83%BD%E6%8D%9F%E5%A4%B1%E5%90%97) 兼容 JavaScript 和 webpack 生态不会存在性能损失吗？ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 我们更重视以较低的迁移成本为现有的 web 项目带来性能提升，而不是单纯追求 benchmark 指标。 兼容 webpack 生态会带来一定的性能损失，但是根据我们的验证结果，这个损失在可接受范围内。 [#](https://rspack.rs/zh/misc/faq#%E4%B8%8D%E4%BD%BF%E7%94%A8-babel-loader-%E7%9A%84%E8%AF%9D%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%85%BC%E5%AE%B9%E6%80%A7%E9%99%8D%E7%BA%A7%E7%BC%96%E8%AF%91) 不使用 babel-loader 的话，如何实现兼容性降级编译？ ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Rspack 内部使用 SWC 进行代码的降级编译（通过 [builtin:swc-loader](https://rspack.rs/zh/guide/features/builtin-swc-loader) ），因此无需通过 babel-loader 来进行代码的降级编译。 [#](https://rspack.rs/zh/misc/faq#rspack-%E5%AF%B9-webpack-api-%E6%98%AF-100-%E5%85%BC%E5%AE%B9%E5%90%97) Rspack 对 webpack API 是 100% 兼容吗？ ------------------------------------------------------------------------------------------------------------------------------------------ 不是，Rspack 目标**不是**完全兼容 100% 的 webpack API，根据二八定律的原则，我们优先实现了在大部分项目里高频使用的 API，并根据用户需求来进一步支持其他 API。 [#](https://rspack.rs/zh/misc/faq#rspack-%E7%9B%B8%E6%AF%94-webpack--swc-loader-%E6%9C%89%E4%BB%80%E4%B9%88%E4%BC%98%E5%8A%BF) Rspack 相比 webpack + SWC-loader 有什么优势？ -------------------------------------------------------------------------------------------------------------------------------------------------------------------- 虽然 webpack + SWC-loader 解决了 babel-loader 的性能问题，但 webpack 本身仍然存在较多的性能瓶颈，如 make，seal 等阶段都是单线程的，而 Rspack 突破了这些限制，因此 Rspack 比 webpack + SWC-loader 有更好的性能表现，尤其是在多核场景。 [#](https://rspack.rs/zh/misc/faq#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%92%E4%BB%B6%E5%92%8C%E8%87%AA%E5%AE%9A%E4%B9%89-loader-%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8-rust-%E8%BF%9B%E8%A1%8C%E5%BC%80%E5%8F%91%E5%90%97) 自定义插件和自定义 Loader 需要使用 Rust 进行开发吗？ ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 不需要。你可以像开发 webpack 插件和 loader 一样，使用 JavaScript 来开发插件和 loader。你也可以选择使用 Rust 来开发插件和 loader，参考 [rspack-binding-template](https://github.com/rstackjs/rspack-binding-template) 。 --- # FAQ - Rspack For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /misc/faq.md. ON THIS PAGE [#](https://rspack.rs/misc/faq#faq) FAQ ======================================= Copy Markdown [#](https://rspack.rs/misc/faq#what-will-be-the-relationship-between-rspack-and-webpack-in-the-future) What will be the relationship between Rspack and webpack in the future? ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ **We have established a partnership with the webpack team.** Rspack is an attempt to optimize webpack performance using Rust, and it has already made good progress. We will continue to explore more possibilities for optimizing webpack with the webpack team. [#](https://rspack.rs/misc/faq#will-compatibility-with-javascript-or-webpack-ecosystem-cause-performance-loss) Will compatibility with JavaScript or webpack ecosystem cause performance loss? ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- We place more emphasis on bringing performance improvements to existing web projects at a lower migration cost than simply chasing benchmark metrics. Compatibility with the webpack ecosystem will result in some performance loss, but according to our verification results, this loss is within an acceptable range. [#](https://rspack.rs/misc/faq#how-to-achieve-compatibility-fallback-compilation-without-using-babel-loader) How to achieve compatibility fallback compilation without using babel-loader? ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Rspack internally uses SWC to perform code downgrade compilation which you can configure by [builtin:swc-loader](https://rspack.rs/guide/features/builtin-swc-loader) , so there is no need to use babel-loader to perform code downgrade compilation. [#](https://rspack.rs/misc/faq#is-rspack-100-compatible-with-webpack-api) Is Rspack 100% compatible with webpack API? --------------------------------------------------------------------------------------------------------------------- No, the goal of Rspack is not to be 100% compatible with 100% of the webpack API. Based on the Pareto principle, we prioritize the implementation of APIs that are commonly used in most projects and support other APIs based on user needs. [#](https://rspack.rs/misc/faq#what-are-the-advantages-of-rspack-compared-to-webpack--swc-loader) What are the advantages of Rspack compared to webpack + SWC-loader? --------------------------------------------------------------------------------------------------------------------------------------------------------------------- Even if webpack + SWC-loader solves the performance problem of babel-loader, webpack itself still has many performance bottlenecks, such as the make and seal stages, which are single-threaded. However, Rspack breaks through these limitations, so Rspack has better performance than webpack + SWC-loader, especially in multi-core scenarios. [#](https://rspack.rs/misc/faq#do-custom-plugins-and-custom-loaders-need-to-be-developed-using-rust) Do custom plugins and custom loaders need to be developed using Rust? -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- You can develop plugins and loaders using JavaScript, just like developing webpack plugins and loaders. Meanwhile, Rspack also supports developing plugins and loaders using Rust. Please refer to [rspack-binding-template](https://github.com/rstackjs/rspack-binding-template) . --- # Announcing Rspack 0.1 - Rspack For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /blog/announcing-0-1.md. ON THIS PAGE [Back to blog](https://rspack.rs/blog/) [#](https://rspack.rs/blog/announcing-0-1#announcing-rspack-01) Announcing Rspack 0.1 ===================================================================================== Copy Markdown _March 06, 2023_ ![Rspack Team](https://assets.rspack.rs/rspack/rspack-logo-with-background.png) Rspack Team [](https://x.com/rspack_dev) @rspack\_dev Today we are so thrilled to announce that Rspack is officially released! Rspack is a Rust-based JavaScript bundler developed by the ByteDance Web Infra team that has features including high-performance, webpack interoperability, flexible configuration etc. Rspack has solved many problems in our scenarios and improved the developer experience for JavaScript engineers. To help more people get involved in this exciting project, we decided to open source this project. You are welcomed to create a pull request or issue. [#](https://rspack.rs/blog/announcing-0-1#why-rspack) Why Rspack? ----------------------------------------------------------------- There are a lot of giant JavaScript applications inside ByteDance. They have very complex build configurations/scripts which may cost ten minutes to half an hour. We have tried so many ways to improve the build performance, but all existing solutions in the world lead to some other issues while solving some of them. After tons of work, we understand the requirements for a bundler are: * Dev startup performance. `npm run dev` is a daily script for developers that may run many times. Reducing the cost of them to one minute from ten minutes is really life-saving. * Build performance. `npm run build` is common in CI/CD environments and determines the efficiency of launch. Many giant applications in ByteDance are built in 20 ~ 30 minutes. If we can reduce it to 3~5 minutes, developers will be really productive. * Flexible configuration. Giant projects always have complex configurations and can't be standardized. Back in time, we migrated some of the projects to other build tools to improve build performance, and the hardest part is changing the configuration. * Production optimization. We tried various solutions in the community and webpack gave the best result in production optimization like chunk-splitting, tree-shaking, etc. A better chunk strategy can help web apps get better metrics performance. In conclusion, we decided to build our own bundler, which is `Rspack`. [#](https://rspack.rs/blog/announcing-0-1#how-is-rspack-doing-now) How is Rspack doing now? ------------------------------------------------------------------------------------------- The Rspack project started about 11 months ago. Although it's still in the early stages, it can bring 5~10 times improvement to applications' build scripts. The metrics can be better when we finish all the optimizations. Rspack has completed the architecture of webpack loader. It means you can use all kinds of loaders in the community, such as `babel-loader`, `less-loader`, `svgr` etc. We are planning to support all features of loader in Rspack. By that time, you can use loaders which haven't been supported for now, such as `vue-loader`. Rspack currently only supports memory cache. Persistent and portable cache will be added in the future. We are working on a build system that can make cache shareable between two devices or environments. And Rspack will help accomplish that. Rspack is now available in all frameworks inside ByteDance, and we are trying to collaborate with all friends in the community. Just like webpack, Rspack is an infrastructure for JavaScript ecosystems, which means that frameworks and Rspack can be beneficial for each other. [#](https://rspack.rs/blog/announcing-0-1#acknowledgement) Acknowledgement -------------------------------------------------------------------------- Rspack can not be shipped today without the inspiration and support of various projects in the community. We would like to show our respect to these predecessors: * [The webpack team and community](https://webpack.js.org/) for creating a great bundler and ecosystem from which we draw a lot of inspiration. * [@sokra](https://github.com/sokra) for the great work on the [webpack](https://github.com/webpack/webpack) project. * [@ScriptedAlchemy](https://github.com/ScriptedAlchemy) for creating Module Federation and helping Rspack connect with the community. * The [SWC](https://github.com/swc-project/swc) project created by [@kdy1](https://github.com/kdy1) , which powers Rspack's code parsing, transformation and minification. * The [esbuild](https://github.com/evanw/esbuild) project created by [@evanw](https://github.com/evanw) , which inspired the concurrent architecture of Rspack. * The [NAPI-RS](https://github.com/napi-rs/napi-rs) project created by [@Brooooooklyn](https://github.com/Brooooooklyn) , which powers Rspack's node-binding implementation. * The [Parcel](https://github.com/parcel-bundler/parcel) project created by [@devongovett](https://github.com/devongovett) which is the pioneer of rust bundler and inspired Rspack's incremental rebuild design. * The [Vite](https://github.com/vitejs/vite) project created by [Evan You](https://github.com/yyx990803) which inspired Rspack's compatibility design of webpack's ecosystem. * The [Rolldown](https://github.com/rolldown-rs/rolldown) project created by [Rolldown team](https://github.com/sponsors/rolldown-rs) , which explores the possibility of making a performant bundler in Rust with Rollup-compatible API. It inspires the design principles of Rspack. * The [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) project created by [@jantimon](https://github.com/jantimon) , `@rspack/html-plugin` is a fork of [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) to avoid some webpack API usage not supported in Rspack. * The [Turbopack](https://github.com/vercel/turbo) project which inspired the ast path logic of Rspack. [#](https://rspack.rs/blog/announcing-0-1#future-plans) Future plans -------------------------------------------------------------------- ### [#](https://rspack.rs/blog/announcing-0-1#improve-basic-capabilities) Improve basic capabilities Keep building Rspack will be our top priority. Compared with webpack, Rspack is still a baby, lacking complex features. Please keep sending us feedback on feature requests. We will finish them step by step. ### [#](https://rspack.rs/blog/announcing-0-1#working-with-community-partners) Working with community partners We would love to offer some help with Rspack integration in your framework. If you are an engineer maintaining a framework who happens to be interested in giving Rspack a try, please contact us. We have also established a partnership with the webpack team. Rspack is an attempt to optimize webpack performance using Rust, and in the future, we will explore more possibilities for optimizing webpack together with the webpack team. When Rspack reaches a certain level of maturity, webpack will attempt to integrate Rspack into webpack with experiments flag. ### [#](https://rspack.rs/blog/announcing-0-1#improve-plugin-capabilities) Improve plugin capabilities Rspack has supported most of the loader APIs, but only a few plugin APIs. There are two reasons why we haven't supported them all. One is that some APIs are bad for performance, so we didn't explore them for developers. And the other reason is simply lack of time, so you can create a merge request to help us. A high performance plugin system is under discussion. It may be shipped out someday. Hopefully it can help developers get shorter build time while accessing a flexible configuration. ### [#](https://rspack.rs/blog/announcing-0-1#continuously-improve-performance) Continuously improve performance Currently, Rspack is a project with performance as the core selling point, so in the future we will do a lot of things to maintain this feature, such as improving the performance observation lab and doing a good job of performance prevention; using concurrent/multi-core friendly algorithms in more scenarios; developing a caching system that can be shared across platforms; optimizing memory usage and consumption, etc. ### [#](https://rspack.rs/blog/announcing-0-1#build-a-quality-assurance-system) Build a quality assurance system Webpack has already accumulated very rich test cases, and in the future Rspack will reuse the existing test cases of webpack to improve its code coverage. Build a better CI system, and build an Ecosystem CI system with community projects to ensure that project upgrades do not cause breaks on upstream projects, to ensure long-term project health, and to ensure long-term increase in test coverage. [#](https://rspack.rs/blog/announcing-0-1#trial) Trial ------------------------------------------------------ * Quick start: [rspack.rs](https://rspack.rs/guide/start/quick-start) * GitHub Repo: [github.com/web-infra-dev/rspack](https://github.com/web-infra-dev/rspack) --- # Rspack 0.6 发布公告 - Rspack For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt, and this page is available as Markdown at /zh/blog/announcing-0-6.md. 目录 [返回博客](https://rspack.rs/zh/blog/) [#](https://rspack.rs/zh/blog/announcing-0-6#rspack-06-%E5%8F%91%E5%B8%83%E5%85%AC%E5%91%8A) Rspack 0.6 发布公告 ============================================================================================================ 复制 Markdown _2024 年 4 月 10 日_ ![Rspack Team](https://assets.rspack.rs/rspack/rspack-logo-with-background.png) Rspack Team [](https://x.com/rspack_dev) @rspack\_dev [#](https://rspack.rs/zh/blog/announcing-0-6#%E4%B8%BB%E8%A6%81%E5%8A%9F%E8%83%BD%E6%9B%B4%E6%96%B0) 主要功能更新 ----------------------------------------------------------------------------------------------------------- ### [#](https://rspack.rs/zh/blog/announcing-0-6#%E5%86%85%E7%BD%AE%E6%94%AF%E6%8C%81-mini-css-extract-plugin) 内置支持 mini-css-extract-plugin 你现在可以使用 `rspack.CssExtractRspackPlugin` 作为 `mini-css-extract-plugin` 的替代。 这在一些场景很实用，例如当内置的 CSS 处理不能满足你的需求，有更定制化的 CSS Modules name 等，或者你想要使用一些依赖 css-loader 的 loader，但仍然想要将 CSS 提取成单独文件。 详细配置见 [CssExtractRspackPlugin](https://rspack.rs/zh/plugins/rspack/css-extract-rspack-plugin#cssextractrspackplugin) 。 rspack.config.mjs import { rspack } from '@rspack/core'; export default { plugins: [new rspack.CssExtractRspackPlugin()], module: { rules: [\ {\ test: /\.css$/i,\ use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],\ },\ ], }, }; > 你可以在[这里](https://github.com/rstackjs/rstack-examples/tree/main/rspack/react-with-extract-css) > 找到一个基础的项目例子。 ### [#](https://rspack.rs/zh/blog/announcing-0-6#%E9%BB%98%E8%AE%A4%E5%BC%80%E5%90%AF%E6%96%B0%E7%89%88-tree-shaking) 默认开启新版 tree shaking Rspack 在 0.1.0 支持了基本的 tree shaking 功能，由于最初的架构还未稳定, 我们使用了相对简单的方法实现了基础版的 tree shaking（仅支持未使用导出删除），但是随着 Rspack 功能的完善，架构逐渐稳定 基础的 tree shaking 无法满足用户的需求，比如： 1. 无法处理循环引用，无法给其他构建阶段足够的优化信息，实现进一步的优化 (mangleExports, concatenateModules, barrel exports optimization)。 2. 经常出现一些 interop 相关的 badcase，例如: worker-thread 模块，Common Js 模块，module federation 等 为了解决以上问题，我们决定使用类似 webpack 的方案，自底向上重新实现整个优化流程，并在 0.4.2 引入 `experiments.rspackFuture.newTreeshaking` 配置，来实验性的开启新的优化算法。 经过 4 个月 bug 修复和优化，新的 tree shaking 算法已经相对稳定，因此我们决定在 0.6.0 默认开启新的 tree shaking 算法。 [#](https://rspack.rs/zh/blog/announcing-0-6#%E4%B8%8D%E5%85%BC%E5%AE%B9%E6%9B%B4%E6%96%B0) 不兼容更新 ------------------------------------------------------------------------------------------------- ### [#](https://rspack.rs/zh/blog/announcing-0-6#%E7%A7%BB%E9%99%A4-experimentsrspackfuturedisableapplyentrylazily) 移除 experiments.rspackFuture.disableApplyEntryLazily `experiments.rspackFuture.disableApplyEntryLazily` 选项自 v0.5.0 已被默认开启，并在 v0.6.0 中被删除。 ### [#](https://rspack.rs/zh/blog/announcing-0-6#%E7%A7%BB%E9%99%A4-compilerbuild-%E5%92%8C-compilerrebuild) 移除 compiler.build 和 compiler.rebuild `compiler.build` 与 `compiler.rebuild` 不属于 webpack 公开 API，目前已经被移除。 ### [#](https://rspack.rs/zh/blog/announcing-0-6#%E7%A7%BB%E9%99%A4-builtinscss-%E5%B9%B6%E5%BC%95%E5%85%A5-css-%E7%9B%B8%E5%85%B3-moduleparser-%E5%92%8C-modulegenerator-%E9%80%89%E9%A1%B9) 移除 builtins.css 并引入 CSS 相关 module.parser 和 module.generator 选项 移除 `builtins.css`，请使用引入的 CSS 相关的 [`module.parser`](https://rspack.rs/zh/config/module-parser#cssauto) 和 [`module.generator`](https://rspack.rs/zh/config/module-generator#cssauto) 选项进行替代。 同时，从 v0.6.0 版本开始，Rspack 的 `experiments.css` 将会以 webpack 的 `experiments.css` 为目标进行对齐，这意味着和 webpack `experiments.css` 一样在未来将不再支持[不支持 CSS 变量的浏览器](https://caniuse.com/css-variables) 。因此，对于那些需要使用尚未得到 `experiments.css` 支持的配置，或者需要兼容老版本浏览器的项目，我们推荐迁移至 [`rspack.CssExtractRspackPlugin`](https://rspack.rs/zh/plugins/rspack/css-extract-rspack-plugin) 。 在 v0.6.0 中，我们引入了三种新的模块类型的 `module.generator` 和 `module.parser` 选项：`css/auto`、`css` 和 `css/module`，这些选项只有在启用 experiments.css 时才会生效，关于如何使用可查看[这个例子](https://github.com/rstackjs/rstack-examples/tree/main/rspack/css-parser-generator-options) 。 在 `module.parser` 选项中，`css`、`css/auto` 和 `css/module` 模块类型都包含了 `namedExports` 属性。它取代了 `builtins.css.namedExports` 配置。 对于 `module.generator` 选项，`css/auto` 和 `css/module` 模块类型提供了 `exportsOnly`、`exportsConvention` 和 `localIdentName` 属性。`css` 类型只包含 `exportsOnly` 和 `exportsConvention` 属性。`exportsOnly`、`exportsConvention` 和 `localIdentName` 分别取代了 `builtins.css.modules.exportsOnly`、`builtins.css.modules.localsConvention` 和 `builtins.css.modules.localIdentName`。 除此之外，还包括一些关于默认值的修改： 1. `exportsConvention` 的值从 `'asIs'`, `'camelCaseOnly'` 等变更为 `'as-is'`, `'camel-case-only'` 等，以保持与 webpack `experiments.css` 的一致。 2. `namedExports: false` 支持同时使用默认导出（default export）、命名导出（named export）和命名空间导出（namespace export），在此之前它只支持使用默认导出： // v0.6.0 之前只支持使用默认导出 import classes from './index.module.css'; // 现在除默认导出之外，也支持： // 命名空间导出 import * as classes from './index.module.css'; // 命名导出 import { class1, class2 } from './index.module.css'; // 默认导出和命名导出同时使用 import classes, { class1, class2 } from './index.module.css'; 3. `namedExports` 的默认值从 `false` 变更为 `true`，这意味着你需要默认使用命名空间导入（例如 `import * as classes from './style.css'`）或命名导入（例如 `import { class1 } from './style.css'`），这将提高与未来[原生 CSS 模块](https://web.dev/articles/css-module-scripts) 的兼容性。而这并不意味着你需要一次性迁移所有的导入，你可以通过设置 `namedExports: false` 来禁用此行为，并且由于现在 `namedExports: false` 也支持命名导出和命名空间导出，因此你可以逐步迁移这些导入。 4. `localIdentName` 的默认值在从在开发模式下 `'[path][name][ext]__[local]'` 和在生产模式下 `'[hash]'` 变更为在开发和生产模式下都是 `'[uniqueName]-[id]-[local]'`，这将略微改善 CSS 产物的 gzip 压缩大小。 5. `exportsOnly` 的默认值在 `target: 'node'` 下由原来的 `false` 变更为 `true`。 6. CSS 默认规则的模块类型从 `css` 变更为 `css/auto`，`css/auto` 将自动解析以 `.module.` 或 `.modules.` 为中缀的 CSS 文件作为 [CSS Modules](https://github.com/css-modules/css-modules) 处理，这与 [`css-loader` 的 `modules.auto: true`](https://github.com/webpack/css-loader?tab=readme-ov-file#auto) 行为一致，这将[简化使用 less 或 sass 与 CSS Modules 的规则书写](https://github.com/webpack/webpack/issues/16572) 。 ### [#](https://rspack.rs/zh/blog/announcing-0-6#%E5%8D%87%E7%BA%A7-swc-%E5%88%B0-090x) 升级 SWC 到 0.90.x 升级 Rust crate `swc_core` 到 `0.90.x`，这会对使用 SWC Wasm 插件的用户产生影响。 ### [#](https://rspack.rs/zh/blog/announcing-0-6#%E5%BD%93-css-%E7%9A%84%E9%A1%BA%E5%BA%8F%E5%9C%A8%E5%A4%9A%E4%B8%AA-chunk-%E4%B8%AD%E4%B8%8D%E4%B8%80%E8%87%B4%E6%97%B6%E5%8F%91%E5%87%BA%E8%AD%A6%E5%91%8A) 当 CSS 的顺序在多个 chunk 中不一致时发出警告 当多个 chunk 中 CSS 顺序不一致时会发出警告，假如你有两个 entry，entryA 和 entryB，entryA 中引入 a.css 然后引入 b.css，而 entryB 中引入 b.css 然后引入 a.css。 当满足 splitChunks 条件时，a.css 和 b.css 会成为单独 chunk，这个 chunk 中 a.css 和 b.css 的顺序无法保证，会产生如下的警告 WARNING in ⚠ chunk src_a_css-src_b_-5c8c53 [css-extract-rspack-plugin] │ Conflicting order. Following module has been added: │ * css ./css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/a.css │ despite it was not able to fulfill desired ordering with these modules: │ * css ./css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/b.css │ - couldn't fulfill desired order of chunk group(s) parent2 │ - while fulfilling desired order of chunk group(s) parent1 如果你确定他们的顺序不一致没有关系，可以通过配置 `ignoreWarnings` 来忽略这种错误。 rspack.config.mjs export default { ignoreWarnings: [/Conflicting order/], }; [#](https://rspack.rs/zh/blog/announcing-0-6#%E8%BF%81%E7%A7%BB%E6%8C%87%E5%8D%97) 迁移指南 --------------------------------------------------------------------------------------- ### [#](https://rspack.rs/zh/blog/announcing-0-6#%E4%BD%BF%E7%94%A8-rspackcssextractrspackplugin) 使用 rspack.CssExtractRspackPlugin 如果你曾经使用 webpack 和 `mini-css-extract-plugin`，只需要将 `mini-css-extract-plugin` 换成 `rspack.CssExtractPlugin` 即可。 rspack.config.mjs + import { rspack } from '@rspack/core'; - import CssExtract from 'mini-css-extract-plugin'; export default { plugins: [new rspack.CssExtractRspackPlugin()], module: { rules: [\ {\ test: /\.css$/i,\ use: [CssExtract.loader, 'css-loader'],\ },\ ], }, }; ### [#](https://rspack.rs/zh/blog/announcing-0-6#%E8%BF%81%E7%A7%BB-builtinscss-%E9%85%8D%E7%BD%AE) 迁移 builtins.css 配置 1. 使用 `module.parser["css/auto"].namedExports` 替代 `builtins.css.namedExports`。 2. 使用 `module.generator["css/auto"].exportsOnly` 替代 `builtins.css.modules.exportsOnly`。 3. 使用 `module.generator["css/auto"].exportsConvention` 替代 `builtins.css.modules.localsConvention`。 4. 使用 `module.generator["css/auto"].localIdentName` 替代 `builtins.css.modules.localIdentName`。 以上出现的 `"css/auto"` 为 CSS 默认的模块类型，可根据需要修改为 `"css"` 或 `"css/module"`。 添加以下配置将保持原有 `builtins.css` 默认行为，可根据以下配置根据需要进行修改： rspack.config.mjs export default { + module: { + generator: { + "css/auto": { + exportsOnly: false, + exportsConvention: 'as-is', + localIdentName: isProduction ? '[hash]' : '[path][name][ext]__[local]', + }, + "css": { + exportsOnly: false, + exportsConvention: 'as-is', + }, + "css/module": { + exportsOnly: false, + exportsConvention: 'as-is', + localIdentName: isProduction ? '[hash]' : '[path][name][ext]__[local]', + }, + }, + parser: { + "css/auto": { + namedExports: false, + }, + "css": { + namedExports: false, + }, + "css/module": { + namedExports: false, + }, + }, + }, } 如需要对部分模块进行配置，可使用 `module.rules` 中的 [`rules[].parser`](https://rspack.rs/zh/config/module-rules#rulesparser) 和 [`rules[].generator`](https://rspack.rs/zh/config/module-rules#rulesgenerator) 选项进行配置。 ### [#](https://rspack.rs/zh/blog/announcing-0-6#%E8%B0%83%E7%94%A8-compilerrun-%E6%89%A7%E8%A1%8C%E6%9E%84%E5%BB%BA) 调用 compiler.run 执行构建 `compiler.build` 或 `compiler.rebuild` 已经被废弃，请切换到 `compiler.run` 进行构建，与重新构建。 ### [#](https://rspack.rs/zh/blog/announcing-0-6#%E5%8D%87%E7%BA%A7-swc-%E6%8F%92%E4%BB%B6) 升级 SWC 插件 在 `0.6.0` 中，Rust crate `swc_core` 的版本升级到 `0.90.x`，使用到的 SWC Wasm 插件需要确保其使用的 `swc_core` 的版本一致性，否则可能产生无法预知的问题。 详情请参考[文档](https://swc.rs/docs/plugin/selecting-swc-core#090x) 。 --- # Announcing Rspack 1.0 alpha - Rspack For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /blog/announcing-1-0-alpha.md. ON THIS PAGE [Back to blog](https://rspack.rs/blog/) [#](https://rspack.rs/blog/announcing-1-0-alpha#announcing-rspack-10-alpha) Announcing Rspack 1.0 alpha ======================================================================================================= Copy Markdown _June 29, 2024_ ![Rspack Team](https://assets.rspack.rs/rspack/rspack-logo-with-background.png) Rspack Team [](https://x.com/rspack_dev) @rspack\_dev ![](https://assets.rspack.rs/rspack/rspack-banner-v1-0-alpha.png) Rspack 1.0 alpha is now available on npm! Before releasing Rspack 1.0 stable version, we will test for 1~2 months to improve the API stability and reliability of v1.0 and to verify its impact on downstream projects. Rspack 1.0 stable version is expected to be released this August. This is a significant milestone as it means that Rspack has implemented the major features and APIs of webpack. This will allow thousands of webpack projects to make a smooth transition while achieving significant improvements in build performance. [#](https://rspack.rs/blog/announcing-1-0-alpha#outputs-optimization) Outputs optimization ------------------------------------------------------------------------------------------ Rspack 1.0 enables the `optimization.concatenateModules` by default during production builds. This option enables module concatenation optimization, also known as scope hoisting. rspack.config.mjs export default { optimization: { // Now enabled by default in production concatenateModules: mode === 'production', }, }; The primary purpose of module concatenation is to merge multiple modules into a single function, thereby reducing the overhead associated with parsing and executing JavaScript code in the browser. By merging modules, redundant code such as import and export statements between modules can be reduced, resulting in smaller bundle sizes. With module concatenation enabled, the output size of Rspack can be reduced by about **4% to 10%** (before Gzip). Currently, Rspack has implemented most of the optimization strategies aligned with webpack. In future versions, Rspack will explore and make improvements based on webpack to provide deeper optimizations and smaller output sizes. [#](https://rspack.rs/blog/announcing-1-0-alpha#builtin-lightning-css) Builtin Lightning CSS -------------------------------------------------------------------------------------------- Rspack 1.0 has built-in integration with [Lightning CSS](https://github.com/parcel-bundler/lightningcss) . Lightning CSS is an extremely fast CSS parser, transformer, bundler, and minifier written in Rust. The new version of Rspack has implemented the CSS minimizer plugin based on Lightning CSS, and it is now the default CSS minimizer of Rspack. Compared to the previously used SWC CSS minimizer plugin, it applies more optimizations to make the CSS output smaller. rspack.config.mjs export default { optimization: { minimizer: [\ // The default CSS minimizer changed:\ - new rspack.SwcCssMinimizerRspackPlugin()\ + new rspack.LightningCssMinimizerRspackPlugin()\ ], }, }; You can switch back to `SwcCssMinimizerRspackPlugin` by following configuration. export default { optimization: { minimizer: [\ new rspack.SwcJsMinimizerRspackPlugin(),\ new rspack.SwcCssMinimizerRspackPlugin(),\ ], }, }; For example, Rspack already has tree shaking for CSS Modules, but it only removes unused CSS Modules classnames referenced by JS files. With the [unusedSymbols](https://lightningcss.dev/minification.html#unused-symbols) option of Lightning CSS, Rspack can now eliminate unused declarations in CSS Modules files, including IDs, keyframes, CSS variables or other CSS identifiers. We believe that Lightning CSS will become the shared foundation for the next generation build tools, and Rspack will support more CSS compilation features based on Lightning CSS.. Thanks to [@devongovett](https://github.com/devongovett) for creating such an excellent tool. [#](https://rspack.rs/blog/announcing-1-0-alpha#lean-core) Lean core -------------------------------------------------------------------- To ensure the long term stability of Rspack v1, we have removed some non-core features that were built into the Rspack core. This allows the core to be lean and focused on providing common bundler features. In v0.x, Rspack core has built-in SWC plugins to support Emotion, Styled Components, and Relay. This is because in the early days Rspack did not support the use of SWC Wasm plugins and could only integrate them into the core. Currently, Rspack supports the use of SWC plugins via [experimental.plugins](https://rspack.rs/guide/features/builtin-swc-loader#jscexperimentalplugins) in `builtin:swc-loader`. So we have removed the built-in plugins from the Rspack core, including: * [@swc/plugin-emotion](https://www.npmjs.com/package/@swc/plugin-emotion) * [@swc/plugin-relay](https://www.npmjs.com/package/@swc/plugin-relay) * [@swc/plugin-styled-components](https://www.npmjs.com/package/@swc/plugin-styled-components) Take `@swc/plugin-styled-components` as an example. In v1.0, you can use it as follows. * Installation: npm i @swc/plugin-styled-components -D * Configuration: export default { module: { rules: [\ {\ test: /\.jsx?$/,\ loader: "builtin:swc-loader",\ options: {\ - rspackExperiments: {\ - styledComponents: {},\ - },\ jsc: {\ + experimental: {\ + plugins: [["@swc/plugin-styled-components", {}]],\ + },\ },\ },\ },\ ], }, }; [#](https://rspack.rs/blog/announcing-1-0-alpha#bundling-css) Bundling CSS -------------------------------------------------------------------------- Rspack 1.0 aligns with the webpack [experiment.css](https://rspack.rs/config/deprecated-options#experimentscss) default value, making it easier to migrate from webpack to Rspack. In the webpack ecosystem, there are three common approaches to bundling CSS files: 1. Use [css-loader](https://github.com/webpack/css-loader) and [mini-css-extract-plugin](https://github.com/webpack/mini-css-extract-plugin) to generate standalone CSS files. 2. Use [css-loader](https://github.com/webpack/css-loader) and [style-loader](https://github.com/webpack/style-loader) to inject CSS through `