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
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.mdexamples/guide/features/asset-base-path.mdexamples/guide/features/asset-module.mdexamples/guide/features/builtin-lightningcss-loader.mdexamples/guide/features/builtin-swc-loader.mdexamples/guide/features/dev-server.mdexamples/guide/features/esm.mdexamples/guide/features/layer.mdexamples/guide/features/lazy-compilation.mdexamples/guide/features/loader.mdexamples/guide/features/module-federation.mdexamples/guide/features/module-resolution.mdexamples/guide/features/plugin.mdexamples/guide/features/web-workers.mdexamples/guide/migration/cra.mdexamples/guide/migration/rspack_0.x.mdexamples/guide/migration/storybook.mdexamples/guide/migration/webpack.mdexamples/guide/optimization/analysis.mdexamples/guide/optimization/code-splitting.mdexamples/guide/optimization/lazy-barrel.mdexamples/guide/optimization/production.mdexamples/guide/optimization/profile.mdexamples/guide/optimization/tree-shaking.mdexamples/guide/optimization/use-rsdoctor.mdexamples/guide/start/ecosystem.mdexamples/guide/start/introduction.mdexamples/guide/start/quick-start.mdexamples/guide/tech/css.mdexamples/guide/tech/json.mdexamples/guide/tech/nestjs.mdexamples/guide/tech/next.mdexamples/guide/tech/preact.mdexamples/guide/tech/react.mdexamples/guide/tech/solid.mdexamples/guide/tech/svelte.mdexamples/guide/tech/typescript.mdexamples/guide/tech/vue.md
Configuration (配置) - examples/config/:
examples/config/cache.mdexamples/config/context.mdexamples/config/deprecated-options.mdexamples/config/dev-server.mdexamples/config/devtool.mdexamples/config/entry.mdexamples/config/experiments.mdexamples/config/extends.mdexamples/config/externals.mdexamples/config/filename-placeholders.mdexamples/config/index.mdexamples/config/infrastructure-logging.mdexamples/config/lazy-compilation.mdexamples/config/mode.mdexamples/config/module-rules.mdexamples/config/module.mdexamples/config/node.mdexamples/config/optimization-optimizationsplitchunks.mdexamples/config/optimization.mdexamples/config/other-options.mdexamples/config/output.mdexamples/config/performance.mdexamples/config/plugins.mdexamples/config/resolve-loader.mdexamples/config/resolve.mdexamples/config/stats.mdexamples/config/target.mdexamples/config/watch.md
Plugins (插件) - examples/plugins/:
examples/plugins/index.mdexamples/plugins/rspack/circular-dependency-rspack-plugin.mdexamples/plugins/rspack/copy-rspack-plugin.mdexamples/plugins/rspack/css-chunking-plugin.mdexamples/plugins/rspack/css-extract-rspack-plugin.mdexamples/plugins/rspack/esm-library-plugin.mdexamples/plugins/rspack/html-rspack-plugin.mdexamples/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdexamples/plugins/rspack/subresource-integrity-plugin.mdexamples/plugins/rspack/swc-js-minimizer-rspack-plugin.mdexamples/plugins/rspack/virtual-modules-plugin.mdexamples/plugins/webpack/banner-plugin.mdexamples/plugins/webpack/case-sensitive-plugin.mdexamples/plugins/webpack/context-replacement-plugin.mdexamples/plugins/webpack/define-plugin.mdexamples/plugins/webpack/dll-plugin.mdexamples/plugins/webpack/dll-reference-plugin.mdexamples/plugins/webpack/electron-target-plugin.mdexamples/plugins/webpack/enable-chunk-loading-plugin.mdexamples/plugins/webpack/enable-library-plugin.mdexamples/plugins/webpack/enable-wasm-loading-plugin.mdexamples/plugins/webpack/entry-plugin.mdexamples/plugins/webpack/environment-plugin.mdexamples/plugins/webpack/eval-source-map-dev-tool-plugin.mdexamples/plugins/webpack/externals-plugin.mdexamples/plugins/webpack/hot-module-replacement-plugin.mdexamples/plugins/webpack/ignore-plugin.mdexamples/plugins/webpack/index.mdexamples/plugins/webpack/internal-plugins.mdexamples/plugins/webpack/javascript-modules-plugin.mdexamples/plugins/webpack/limit-chunk-count-plugin.mdexamples/plugins/webpack/module-federation-plugin-v1.mdexamples/plugins/webpack/module-federation-plugin.mdexamples/plugins/webpack/no-emit-on-errors-plugin.mdexamples/plugins/webpack/node-target-plugin.mdexamples/plugins/webpack/node-template-plugin.mdexamples/plugins/webpack/normal-module-replacement-plugin.mdexamples/plugins/webpack/progress-plugin.mdexamples/plugins/webpack/provide-plugin.mdexamples/plugins/webpack/runtime-chunk-plugin.mdexamples/plugins/webpack/source-map-dev-tool-plugin.mdexamples/plugins/webpack/split-chunks-plugin.md
API Reference - examples/api/:
examples/api/cli.mdexamples/api/index.mdexamples/api/javascript-api/browser.mdexamples/api/javascript-api/cache.mdexamples/api/javascript-api/compilation.mdexamples/api/javascript-api/compiler.mdexamples/api/javascript-api/index.mdexamples/api/javascript-api/logger.mdexamples/api/javascript-api/resolver.mdexamples/api/javascript-api/stats-json.mdexamples/api/javascript-api/stats.mdexamples/api/javascript-api/swc.mdexamples/api/loader-api/context.mdexamples/api/loader-api/index.mdexamples/api/loader-api/inline-match-resource.mdexamples/api/loader-api/inline.mdexamples/api/loader-api/writing-loaders.mdexamples/api/plugin-api/compilation-hooks.mdexamples/api/plugin-api/compiler-hooks.mdexamples/api/plugin-api/context-module-factory-hooks.mdexamples/api/plugin-api/index.mdexamples/api/plugin-api/javascript-modules-plugin-hooks.mdexamples/api/plugin-api/normal-module-factory-hooks.mdexamples/api/plugin-api/runtime-plugin-hooks.mdexamples/api/plugin-api/stats-hooks.mdexamples/api/runtime-api/hmr.mdexamples/api/runtime-api/module-methods.mdexamples/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:
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
Resources
Keywords
Rspack, rspack, bundler, webpack, rust, build tool, bundling, code splitting, HMR, hot module replacement, loader, plugin, configuration, entry, output, optimization, development server, 打包工具, 构建工具, 代码分割, 热模块替换, 加载器, 插件, 配置, 入口, 输出, 优化, 开发服务器
1---2name: rspack3description: Provides comprehensive guidance for Rspack bundler including configuration, plugins, loaders, optimization, and Webpack compatibility. Use when the user asks about Rspack, needs to configure Rspack, optimize build performance, or migrate from Webpack.4license: Complete terms in LICENSE.txt5---6
7## When to use this skill
8
9Use this skill whenever the user wants to:
10- Set up Rspack in a new or existing project
11- Configure Rspack for different environments
12- Use built-in plugins or create custom plugins
13- Migrate from Webpack to Rspack
14- Optimize build performance
15- Understand Rspack configuration options
16- Use Rspack CLI or JavaScript API
17- Write custom loaders
18- Understand plugin API and hooks
19- Configure entry points and output
20- Set up code splitting and optimization
21- Configure development server
22- Handle assets and resources
23- Use TypeScript with Rspack
24- Troubleshoot Rspack issues
25
26## How to use this skill
27
28This 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:
29
301. **Identify the topic** from the user's request:
31 - Getting started/快速上手 → `examples/guide/start/`
32 - Configuration/配置 → `examples/config/`
33 - Plugins/插件 → `examples/plugins/`
34 - API → `examples/api/`
35
362. **Load the appropriate example file** from the `examples/` directory:
37
38 **Guide (指南)** - `examples/guide/`:
39 - `examples/guide/compatibility/plugin.md`
40 - `examples/guide/features/asset-base-path.md`
41 - `examples/guide/features/asset-module.md`
42 - `examples/guide/features/builtin-lightningcss-loader.md`
43 - `examples/guide/features/builtin-swc-loader.md`
44 - `examples/guide/features/dev-server.md`
45 - `examples/guide/features/esm.md`
46 - `examples/guide/features/layer.md`
47 - `examples/guide/features/lazy-compilation.md`
48 - `examples/guide/features/loader.md`
49 - `examples/guide/features/module-federation.md`
50 - `examples/guide/features/module-resolution.md`
51 - `examples/guide/features/plugin.md`
52 - `examples/guide/features/web-workers.md`
53 - `examples/guide/migration/cra.md`
54 - `examples/guide/migration/rspack_0.x.md`
55 - `examples/guide/migration/storybook.md`
56 - `examples/guide/migration/webpack.md`
57 - `examples/guide/optimization/analysis.md`
58 - `examples/guide/optimization/code-splitting.md`
59 - `examples/guide/optimization/lazy-barrel.md`
60 - `examples/guide/optimization/production.md`
61 - `examples/guide/optimization/profile.md`
62 - `examples/guide/optimization/tree-shaking.md`
63 - `examples/guide/optimization/use-rsdoctor.md`
64 - `examples/guide/start/ecosystem.md`
65 - `examples/guide/start/introduction.md`
66 - `examples/guide/start/quick-start.md`
67 - `examples/guide/tech/css.md`
68 - `examples/guide/tech/json.md`
69 - `examples/guide/tech/nestjs.md`
70 - `examples/guide/tech/next.md`
71 - `examples/guide/tech/preact.md`
72 - `examples/guide/tech/react.md`
73 - `examples/guide/tech/solid.md`
74 - `examples/guide/tech/svelte.md`
75 - `examples/guide/tech/typescript.md`
76 - `examples/guide/tech/vue.md`
77
78 **Configuration (配置)** - `examples/config/`:
79 - `examples/config/cache.md`
80 - `examples/config/context.md`
81 - `examples/config/deprecated-options.md`
82 - `examples/config/dev-server.md`
83 - `examples/config/devtool.md`
84 - `examples/config/entry.md`
85 - `examples/config/experiments.md`
86 - `examples/config/extends.md`
87 - `examples/config/externals.md`
88 - `examples/config/filename-placeholders.md`
89 - `examples/config/index.md`
90 - `examples/config/infrastructure-logging.md`
91 - `examples/config/lazy-compilation.md`
92 - `examples/config/mode.md`
93 - `examples/config/module-rules.md`
94 - `examples/config/module.md`
95 - `examples/config/node.md`
96 - `examples/config/optimization-optimizationsplitchunks.md`
97 - `examples/config/optimization.md`
98 - `examples/config/other-options.md`
99 - `examples/config/output.md`
100 - `examples/config/performance.md`
101 - `examples/config/plugins.md`
102 - `examples/config/resolve-loader.md`
103 - `examples/config/resolve.md`
104 - `examples/config/stats.md`
105 - `examples/config/target.md`
106 - `examples/config/watch.md`
107
108 **Plugins (插件)** - `examples/plugins/`:
109 - `examples/plugins/index.md`
110 - `examples/plugins/rspack/circular-dependency-rspack-plugin.md`
111 - `examples/plugins/rspack/copy-rspack-plugin.md`
112 - `examples/plugins/rspack/css-chunking-plugin.md`
113 - `examples/plugins/rspack/css-extract-rspack-plugin.md`
114 - `examples/plugins/rspack/esm-library-plugin.md`
115 - `examples/plugins/rspack/html-rspack-plugin.md`
116 - `examples/plugins/rspack/lightning-css-minimizer-rspack-plugin.md`
117 - `examples/plugins/rspack/subresource-integrity-plugin.md`
118 - `examples/plugins/rspack/swc-js-minimizer-rspack-plugin.md`
119 - `examples/plugins/rspack/virtual-modules-plugin.md`
120 - `examples/plugins/webpack/banner-plugin.md`
121 - `examples/plugins/webpack/case-sensitive-plugin.md`
122 - `examples/plugins/webpack/context-replacement-plugin.md`
123 - `examples/plugins/webpack/define-plugin.md`
124 - `examples/plugins/webpack/dll-plugin.md`
125 - `examples/plugins/webpack/dll-reference-plugin.md`
126 - `examples/plugins/webpack/electron-target-plugin.md`
127 - `examples/plugins/webpack/enable-chunk-loading-plugin.md`
128 - `examples/plugins/webpack/enable-library-plugin.md`
129 - `examples/plugins/webpack/enable-wasm-loading-plugin.md`
130 - `examples/plugins/webpack/entry-plugin.md`
131 - `examples/plugins/webpack/environment-plugin.md`
132 - `examples/plugins/webpack/eval-source-map-dev-tool-plugin.md`
133 - `examples/plugins/webpack/externals-plugin.md`
134 - `examples/plugins/webpack/hot-module-replacement-plugin.md`
135 - `examples/plugins/webpack/ignore-plugin.md`
136 - `examples/plugins/webpack/index.md`
137 - `examples/plugins/webpack/internal-plugins.md`
138 - `examples/plugins/webpack/javascript-modules-plugin.md`
139 - `examples/plugins/webpack/limit-chunk-count-plugin.md`
140 - `examples/plugins/webpack/module-federation-plugin-v1.md`
141 - `examples/plugins/webpack/module-federation-plugin.md`
142 - `examples/plugins/webpack/no-emit-on-errors-plugin.md`
143 - `examples/plugins/webpack/node-target-plugin.md`
144 - `examples/plugins/webpack/node-template-plugin.md`
145 - `examples/plugins/webpack/normal-module-replacement-plugin.md`
146 - `examples/plugins/webpack/progress-plugin.md`
147 - `examples/plugins/webpack/provide-plugin.md`
148 - `examples/plugins/webpack/runtime-chunk-plugin.md`
149 - `examples/plugins/webpack/source-map-dev-tool-plugin.md`
150 - `examples/plugins/webpack/split-chunks-plugin.md`
151
152 **API Reference** - `examples/api/`:
153 - `examples/api/cli.md`
154 - `examples/api/index.md`
155 - `examples/api/javascript-api/browser.md`
156 - `examples/api/javascript-api/cache.md`
157 - `examples/api/javascript-api/compilation.md`
158 - `examples/api/javascript-api/compiler.md`
159 - `examples/api/javascript-api/index.md`
160 - `examples/api/javascript-api/logger.md`
161 - `examples/api/javascript-api/resolver.md`
162 - `examples/api/javascript-api/stats-json.md`
163 - `examples/api/javascript-api/stats.md`
164 - `examples/api/javascript-api/swc.md`
165 - `examples/api/loader-api/context.md`
166 - `examples/api/loader-api/index.md`
167 - `examples/api/loader-api/inline-match-resource.md`
168 - `examples/api/loader-api/inline.md`
169 - `examples/api/loader-api/writing-loaders.md`
170 - `examples/api/plugin-api/compilation-hooks.md`
171 - `examples/api/plugin-api/compiler-hooks.md`
172 - `examples/api/plugin-api/context-module-factory-hooks.md`
173 - `examples/api/plugin-api/index.md`
174 - `examples/api/plugin-api/javascript-modules-plugin-hooks.md`
175 - `examples/api/plugin-api/normal-module-factory-hooks.md`
176 - `examples/api/plugin-api/runtime-plugin-hooks.md`
177 - `examples/api/plugin-api/stats-hooks.md`
178 - `examples/api/runtime-api/hmr.md`
179 - `examples/api/runtime-api/module-methods.md`
180 - `examples/api/runtime-api/module-variables.md`
181
1823. **Follow the specific instructions** in that example file for syntax, structure, and best practices
183
184 **Important Notes**:
185 - Rspack is compatible with most Webpack plugins and loaders
186 - Configuration format is similar to Webpack
187 - Rspack provides better performance than Webpack
188 - Examples include both JavaScript and TypeScript versions
189 - Each example file includes parameters, returns, common errors, best practices, and scenarios
190
1914. **Reference the official documentation** when needed:
192 - Guide: https://rspack.rs/zh/guide/
193 - Configuration: https://rspack.rs/zh/config/
194 - Plugins: https://rspack.rs/zh/plugins/
195 - API: https://rspack.rs/zh/api/
196
197## Best Practices
198
1991. **Use TypeScript for configuration**: Better type safety and autocomplete
2002. **Leverage built-in plugins**: Use Rspack plugins when available
2013. **Optimize for production**: Use production mode for builds
2024. **Code splitting**: Use optimization.splitChunks for better performance
2035. **Cache configuration**: Enable persistent caching for faster rebuilds
2046. **Use HMR**: Enable Hot Module Replacement for better DX
205
206## Resources
207
208- **Official Documentation**: https://rspack.rs/zh/
209- **Getting Started**: https://rspack.rs/zh/guide/start/introduction
210- **Configuration**: https://rspack.rs/zh/config/
211- **Plugins**: https://rspack.rs/zh/plugins/
212- **API Reference**: https://rspack.rs/zh/api/
213- **GitHub Repository**: https://github.com/web-infra-dev/rspack
214
215## Keywords
216
217Rspack, rspack, bundler, webpack, rust, build tool, bundling, code splitting, HMR, hot module replacement, loader, plugin, configuration, entry, output, optimization, development server, 打包工具, 构建工具, 代码分割, 热模块替换, 加载器, 插件, 配置, 入口, 输出, 优化, 开发服务器
majiayu000