rspack

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用此技能

Use this skill whenever the user wants to:

Set up Rspack in a new or existing project
Configure Rspack for different environments
Use built-in plugins or create custom plugins
Migrate from Webpack to Rspack
Optimize build performance
Understand Rspack configuration options
Use Rspack CLI or JavaScript API
Write custom loaders
Understand plugin API and hooks
Configure entry points and output
Set up code splitting and optimization
Configure development server
Handle assets and resources
Use TypeScript with Rspack
Troubleshoot Rspack issues

当用户有以下需求时，可使用此技能：

在新项目或现有项目中搭建Rspack
为不同环境配置Rspack
使用内置插件或创建自定义插件
从Webpack迁移至Rspack
优化构建性能
了解Rspack配置选项
使用Rspack CLI或JavaScript API
编写自定义加载器
了解插件API与钩子
配置入口与输出
搭建代码分割与优化方案
配置开发服务器
处理资源文件
在Rspack中使用TypeScript
排查Rspack相关问题

How to use this skill

如何使用此技能

This skill is organized to match the Rspack official documentation structure (https://rspack.rs/zh/guide/start/introduction, https://rspack.rs/zh/config/, https://rspack.rs/zh/plugins/, https://rspack.rs/zh/api/). When working with Rspack:

Identify the topic from the user's request:
- Getting started/快速上手 →
```
examples/guide/start/
```
- Configuration/配置 →
```
examples/config/
```
- Plugins/插件 →
```
examples/plugins/
```
- API →
```
examples/api/
```

Load the appropriate example file from the

examples/

directory:

Guide (指南) -

examples/guide/

```
examples/guide/compatibility/plugin.md
```

examples/guide/features/asset-base-path.md

```
examples/guide/features/asset-module.md
```

examples/guide/features/builtin-lightningcss-loader.md

examples/guide/features/builtin-swc-loader.md

```
examples/guide/features/dev-server.md
```
```
examples/guide/features/esm.md
```
```
examples/guide/features/layer.md
```

examples/guide/features/lazy-compilation.md

```
examples/guide/features/loader.md
```

examples/guide/features/module-federation.md

examples/guide/features/module-resolution.md

```
examples/guide/features/plugin.md
```
```
examples/guide/features/web-workers.md
```
```
examples/guide/migration/cra.md
```
```
examples/guide/migration/rspack_0.x.md
```
```
examples/guide/migration/storybook.md
```
```
examples/guide/migration/webpack.md
```
```
examples/guide/optimization/analysis.md
```

examples/guide/optimization/code-splitting.md

examples/guide/optimization/lazy-barrel.md

examples/guide/optimization/production.md

```
examples/guide/optimization/profile.md
```

examples/guide/optimization/tree-shaking.md

examples/guide/optimization/use-rsdoctor.md

```
examples/guide/start/ecosystem.md
```
```
examples/guide/start/introduction.md
```
```
examples/guide/start/quick-start.md
```
```
examples/guide/tech/css.md
```
```
examples/guide/tech/json.md
```
```
examples/guide/tech/nestjs.md
```
```
examples/guide/tech/next.md
```
```
examples/guide/tech/preact.md
```
```
examples/guide/tech/react.md
```
```
examples/guide/tech/solid.md
```
```
examples/guide/tech/svelte.md
```
```
examples/guide/tech/typescript.md
```
```
examples/guide/tech/vue.md
```

Configuration (配置) -

examples/config/

```
examples/config/cache.md
```
```
examples/config/context.md
```
```
examples/config/deprecated-options.md
```
```
examples/config/dev-server.md
```
```
examples/config/devtool.md
```
```
examples/config/entry.md
```
```
examples/config/experiments.md
```
```
examples/config/extends.md
```
```
examples/config/externals.md
```

examples/config/filename-placeholders.md

```
examples/config/index.md
```

examples/config/infrastructure-logging.md

```
examples/config/lazy-compilation.md
```
```
examples/config/mode.md
```
```
examples/config/module-rules.md
```
```
examples/config/module.md
```
```
examples/config/node.md
```

examples/config/optimization-optimizationsplitchunks.md

```
examples/config/optimization.md
```
```
examples/config/other-options.md
```
```
examples/config/output.md
```
```
examples/config/performance.md
```
```
examples/config/plugins.md
```
```
examples/config/resolve-loader.md
```
```
examples/config/resolve.md
```
```
examples/config/stats.md
```
```
examples/config/target.md
```
```
examples/config/watch.md
```

Plugins (插件) -

examples/plugins/

```
examples/plugins/index.md
```

examples/plugins/rspack/circular-dependency-rspack-plugin.md

examples/plugins/rspack/copy-rspack-plugin.md

examples/plugins/rspack/css-chunking-plugin.md

examples/plugins/rspack/css-extract-rspack-plugin.md

examples/plugins/rspack/esm-library-plugin.md

examples/plugins/rspack/html-rspack-plugin.md

examples/plugins/rspack/lightning-css-minimizer-rspack-plugin.md

examples/plugins/rspack/subresource-integrity-plugin.md

examples/plugins/rspack/swc-js-minimizer-rspack-plugin.md

examples/plugins/rspack/virtual-modules-plugin.md

examples/plugins/webpack/banner-plugin.md

examples/plugins/webpack/case-sensitive-plugin.md

examples/plugins/webpack/context-replacement-plugin.md

examples/plugins/webpack/define-plugin.md

```
examples/plugins/webpack/dll-plugin.md
```

examples/plugins/webpack/dll-reference-plugin.md

examples/plugins/webpack/electron-target-plugin.md

examples/plugins/webpack/enable-chunk-loading-plugin.md

examples/plugins/webpack/enable-library-plugin.md

examples/plugins/webpack/enable-wasm-loading-plugin.md

examples/plugins/webpack/entry-plugin.md

examples/plugins/webpack/environment-plugin.md

examples/plugins/webpack/eval-source-map-dev-tool-plugin.md

examples/plugins/webpack/externals-plugin.md

examples/plugins/webpack/hot-module-replacement-plugin.md

examples/plugins/webpack/ignore-plugin.md

```
examples/plugins/webpack/index.md
```

examples/plugins/webpack/internal-plugins.md

examples/plugins/webpack/javascript-modules-plugin.md

examples/plugins/webpack/limit-chunk-count-plugin.md

examples/plugins/webpack/module-federation-plugin-v1.md

examples/plugins/webpack/module-federation-plugin.md

examples/plugins/webpack/no-emit-on-errors-plugin.md

examples/plugins/webpack/node-target-plugin.md

examples/plugins/webpack/node-template-plugin.md

examples/plugins/webpack/normal-module-replacement-plugin.md

examples/plugins/webpack/progress-plugin.md

examples/plugins/webpack/provide-plugin.md

examples/plugins/webpack/runtime-chunk-plugin.md

examples/plugins/webpack/source-map-dev-tool-plugin.md

examples/plugins/webpack/split-chunks-plugin.md

API Reference -

examples/api/

```
examples/api/cli.md
```
```
examples/api/index.md
```
```
examples/api/javascript-api/browser.md
```
```
examples/api/javascript-api/cache.md
```

examples/api/javascript-api/compilation.md

```
examples/api/javascript-api/compiler.md
```
```
examples/api/javascript-api/index.md
```
```
examples/api/javascript-api/logger.md
```
```
examples/api/javascript-api/resolver.md
```

examples/api/javascript-api/stats-json.md

```
examples/api/javascript-api/stats.md
```
```
examples/api/javascript-api/swc.md
```
```
examples/api/loader-api/context.md
```
```
examples/api/loader-api/index.md
```

examples/api/loader-api/inline-match-resource.md

```
examples/api/loader-api/inline.md
```

examples/api/loader-api/writing-loaders.md

examples/api/plugin-api/compilation-hooks.md

examples/api/plugin-api/compiler-hooks.md

examples/api/plugin-api/context-module-factory-hooks.md

```
examples/api/plugin-api/index.md
```

examples/api/plugin-api/javascript-modules-plugin-hooks.md

examples/api/plugin-api/normal-module-factory-hooks.md

examples/api/plugin-api/runtime-plugin-hooks.md

```
examples/api/plugin-api/stats-hooks.md
```
```
examples/api/runtime-api/hmr.md
```

examples/api/runtime-api/module-methods.md

examples/api/runtime-api/module-variables.md

Follow the specific instructions in that example file for syntax, structure, and best practices

Important Notes:
- Rspack is compatible with most Webpack plugins and loaders
- Configuration format is similar to Webpack
- Rspack provides better performance than Webpack
- Examples include both JavaScript and TypeScript versions
- Each example file includes parameters, returns, common errors, best practices, and scenarios
Reference the official documentation when needed:
- Guide: https://rspack.rs/zh/guide/
- Configuration: https://rspack.rs/zh/config/
- Plugins: https://rspack.rs/zh/plugins/
- API: https://rspack.rs/zh/api/

本技能的结构与Rspack官方文档（https://rspack.rs/zh/guide/start/introduction, https://rspack.rs/zh/config/, https://rspack.rs/zh/plugins/, https://rspack.rs/zh/api/）保持一致。使用Rspack时，请遵循以下步骤：

从用户的请求中确定主题：
- 快速上手 →
```
examples/guide/start/
```
- 配置 →
```
examples/config/
```
- 插件 →
```
examples/plugins/
```
- API →
```
examples/api/
```

从
examples/
目录中加载对应的示例文件：

指南 -

examples/guide/

```
examples/guide/compatibility/plugin.md
```

examples/guide/features/asset-base-path.md

```
examples/guide/features/asset-module.md
```

examples/guide/features/builtin-lightningcss-loader.md

examples/guide/features/builtin-swc-loader.md

```
examples/guide/features/dev-server.md
```
```
examples/guide/features/esm.md
```
```
examples/guide/features/layer.md
```

examples/guide/features/lazy-compilation.md

```
examples/guide/features/loader.md
```

examples/guide/features/module-federation.md

examples/guide/features/module-resolution.md

```
examples/guide/features/plugin.md
```
```
examples/guide/features/web-workers.md
```
```
examples/guide/migration/cra.md
```
```
examples/guide/migration/rspack_0.x.md
```
```
examples/guide/migration/storybook.md
```
```
examples/guide/migration/webpack.md
```
```
examples/guide/optimization/analysis.md
```

examples/guide/optimization/code-splitting.md

examples/guide/optimization/lazy-barrel.md

examples/guide/optimization/production.md

```
examples/guide/optimization/profile.md
```

examples/guide/optimization/tree-shaking.md

examples/guide/optimization/use-rsdoctor.md

```
examples/guide/start/ecosystem.md
```
```
examples/guide/start/introduction.md
```
```
examples/guide/start/quick-start.md
```
```
examples/guide/tech/css.md
```
```
examples/guide/tech/json.md
```
```
examples/guide/tech/nestjs.md
```
```
examples/guide/tech/next.md
```
```
examples/guide/tech/preact.md
```
```
examples/guide/tech/react.md
```
```
examples/guide/tech/solid.md
```
```
examples/guide/tech/svelte.md
```
```
examples/guide/tech/typescript.md
```
```
examples/guide/tech/vue.md
```

配置 -

examples/config/

```
examples/config/cache.md
```
```
examples/config/context.md
```
```
examples/config/deprecated-options.md
```
```
examples/config/dev-server.md
```
```
examples/config/devtool.md
```
```
examples/config/entry.md
```
```
examples/config/experiments.md
```
```
examples/config/extends.md
```
```
examples/config/externals.md
```

examples/config/filename-placeholders.md

```
examples/config/index.md
```

examples/config/infrastructure-logging.md

```
examples/config/lazy-compilation.md
```
```
examples/config/mode.md
```
```
examples/config/module-rules.md
```
```
examples/config/module.md
```
```
examples/config/node.md
```

examples/config/optimization-optimizationsplitchunks.md

```
examples/config/optimization.md
```
```
examples/config/other-options.md
```
```
examples/config/output.md
```
```
examples/config/performance.md
```
```
examples/config/plugins.md
```
```
examples/config/resolve-loader.md
```
```
examples/config/resolve.md
```
```
examples/config/stats.md
```
```
examples/config/target.md
```
```
examples/config/watch.md
```

插件 -

examples/plugins/

```
examples/plugins/index.md
```

examples/plugins/rspack/circular-dependency-rspack-plugin.md

examples/plugins/rspack/copy-rspack-plugin.md

examples/plugins/rspack/css-chunking-plugin.md

examples/plugins/rspack/css-extract-rspack-plugin.md

examples/plugins/rspack/esm-library-plugin.md

examples/plugins/rspack/html-rspack-plugin.md

examples/plugins/rspack/lightning-css-minimizer-rspack-plugin.md

examples/plugins/rspack/subresource-integrity-plugin.md

examples/plugins/rspack/swc-js-minimizer-rspack-plugin.md

examples/plugins/rspack/virtual-modules-plugin.md

examples/plugins/webpack/banner-plugin.md

examples/plugins/webpack/case-sensitive-plugin.md

examples/plugins/webpack/context-replacement-plugin.md

examples/plugins/webpack/define-plugin.md

```
examples/plugins/webpack/dll-plugin.md
```

examples/plugins/webpack/dll-reference-plugin.md

examples/plugins/webpack/electron-target-plugin.md

examples/plugins/webpack/enable-chunk-loading-plugin.md

examples/plugins/webpack/enable-library-plugin.md

examples/plugins/webpack/enable-wasm-loading-plugin.md

examples/plugins/webpack/entry-plugin.md

examples/plugins/webpack/environment-plugin.md

examples/plugins/webpack/eval-source-map-dev-tool-plugin.md

examples/plugins/webpack/externals-plugin.md

examples/plugins/webpack/hot-module-replacement-plugin.md

examples/plugins/webpack/ignore-plugin.md

```
examples/plugins/webpack/index.md
```

examples/plugins/webpack/internal-plugins.md

examples/plugins/webpack/javascript-modules-plugin.md

examples/plugins/webpack/limit-chunk-count-plugin.md

examples/plugins/webpack/module-federation-plugin-v1.md

examples/plugins/webpack/module-federation-plugin.md

examples/plugins/webpack/no-emit-on-errors-plugin.md

examples/plugins/webpack/node-target-plugin.md

examples/plugins/webpack/node-template-plugin.md

examples/plugins/webpack/normal-module-replacement-plugin.md

examples/plugins/webpack/progress-plugin.md

examples/plugins/webpack/provide-plugin.md

examples/plugins/webpack/runtime-chunk-plugin.md

examples/plugins/webpack/source-map-dev-tool-plugin.md

examples/plugins/webpack/split-chunks-plugin.md

API参考 -

examples/api/

```
examples/api/cli.md
```
```
examples/api/index.md
```
```
examples/api/javascript-api/browser.md
```
```
examples/api/javascript-api/cache.md
```

examples/api/javascript-api/compilation.md

```
examples/api/javascript-api/compiler.md
```
```
examples/api/javascript-api/index.md
```
```
examples/api/javascript-api/logger.md
```
```
examples/api/javascript-api/resolver.md
```

examples/api/javascript-api/stats-json.md

```
examples/api/javascript-api/stats.md
```
```
examples/api/javascript-api/swc.md
```
```
examples/api/loader-api/context.md
```
```
examples/api/loader-api/index.md
```

examples/api/loader-api/inline-match-resource.md

```
examples/api/loader-api/inline.md
```

examples/api/loader-api/writing-loaders.md

examples/api/plugin-api/compilation-hooks.md

examples/api/plugin-api/compiler-hooks.md

examples/api/plugin-api/context-module-factory-hooks.md

```
examples/api/plugin-api/index.md
```

examples/api/plugin-api/javascript-modules-plugin-hooks.md

examples/api/plugin-api/normal-module-factory-hooks.md

examples/api/plugin-api/runtime-plugin-hooks.md

```
examples/api/plugin-api/stats-hooks.md
```
```
examples/api/runtime-api/hmr.md
```

examples/api/runtime-api/module-methods.md

examples/api/runtime-api/module-variables.md

遵循示例文件中的具体说明，包括语法、结构和最佳实践

重要说明:
- Rspack兼容大多数Webpack插件和加载器
- 配置格式与Webpack类似
- Rspack的性能优于Webpack
- 示例包含JavaScript和TypeScript两种版本
- 每个示例文件都包含参数、返回值、常见错误、最佳实践及适用场景
必要时参考官方文档:
- 指南：https://rspack.rs/zh/guide/
- 配置：https://rspack.rs/zh/config/
- 插件：https://rspack.rs/zh/plugins/
- API：https://rspack.rs/zh/api/

Best Practices

最佳实践

Use TypeScript for configuration: Better type safety and autocomplete
Leverage built-in plugins: Use Rspack plugins when available
Optimize for production: Use production mode for builds
Code splitting: Use optimization.splitChunks for better performance
Cache configuration: Enable persistent caching for faster rebuilds
Use HMR: Enable Hot Module Replacement for better DX

使用TypeScript编写配置：获得更好的类型安全与自动补全
利用内置插件：优先使用Rspack提供的插件
针对生产环境优化：构建时使用生产模式
代码分割：使用optimization.splitChunks提升性能
缓存配置：启用持久化缓存以加快重构建速度
使用HMR：启用热模块替换以提升开发体验

Resources

资源

Official Documentation: https://rspack.rs/zh/
Getting Started: https://rspack.rs/zh/guide/start/introduction
Configuration: https://rspack.rs/zh/config/
Plugins: https://rspack.rs/zh/plugins/
API Reference: https://rspack.rs/zh/api/
GitHub Repository: https://github.com/web-infra-dev/rspack

官方文档：https://rspack.rs/zh/
快速上手：https://rspack.rs/zh/guide/start/introduction
配置：https://rspack.rs/zh/config/
插件：https://rspack.rs/zh/plugins/
API参考：https://rspack.rs/zh/api/
GitHub仓库：https://github.com/web-infra-dev/rspack

Keywords

关键词

Rspack, rspack, bundler, webpack, rust, build tool, bundling, code splitting, HMR, hot module replacement, loader, plugin, configuration, entry, output, optimization, development server, 打包工具, 构建工具, 代码分割, 热模块替换, 加载器, 插件, 配置, 入口, 输出, 优化, 开发服务器

Rspack, rspack, 打包工具, webpack, rust, 构建工具, 代码分割, HMR, 热模块替换, 加载器, 插件, 配置, 入口, 输出, 优化, 开发服务器, bundler, build tool, bundling, code splitting, hot module replacement, loader, plugin, configuration, entry, output, optimization, development server