关于 rspack
面向使用 Rspack 的开发者的参考技能,按指南、配置、插件和 API 整理示例,涵盖项目设置、迁移、优化与故障排查。
主要功能
- 01Rspack 设置与配置
- 02Webpack 迁移指导
- 03插件与加载器示例
- 04CLI 和 JavaScript API 参考
- 05构建优化指导
适用场景
- 01在项目中设置 Rspack
- 02配置不同环境的构建
- 03迁移 Webpack 项目
- 04排查构建或配置问题
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ partme-ai/ full-stack-skills --skill rspack安装后在 Claude Code 中输入/rspack确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
LICENSE.txtapi/cli.mdjavascript-api.mdloader-api.mdplugin-api.mdruntime-api.mdexamples/api/cli.mdindex.mdexamples/api/javascript-api/browser.mdcache.mdcompilation.mdcompiler.mdindex.mdlogger.mdresolver.mdstats-json.mdstats.mdswc.mdexamples/api/loader-api/context.mdindex.mdinline-match-resource.mdinline.mdwriting-loaders.mdexamples/api/plugin-api/compilation-hooks.mdcompiler-hooks.mdcontext-module-factory-hooks.mdindex.mdjavascript-modules-plugin-hooks.mdnormal-module-factory-hooks.mdruntime-plugin-hooks.md详细介绍
何时使用此技能
在用户想要以下操作时使用此技能:
- 在新项目或现有项目中设置 Rspack
- 为不同环境配置 Rspack
- 使用内置插件或创建自定义插件
- 从 Webpack 迁移到 Rspack
- 优化构建性能
- 了解 Rspack 配置选项
- 使用 Rspack CLI 或 JavaScript API
- 编写自定义 loader
- 了解插件 API 和钩子
- 配置入口和输出
- 设置代码拆分和优化
- 配置开发服务器
- 处理资产和资源
- 在 Rspack 中使用 TypeScript
- 排查 Rspack 问题
如何使用此技能
此技能按照 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.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
配置(配置) -
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 参考 -
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
-
遵循相应示例文件中关于语法、结构和最佳实践的具体说明 重要说明:
- Rspack 与大多数 Webpack 插件和加载器兼容
- 配置格式与 Webpack 类似
- Rspack 的性能优于 Webpack
- 示例同时包含 JavaScript 和 TypeScript 版本
- 每个示例文件都包含参数、返回值、常见错误、最佳实践和使用场景
-
必要时参考官方文档:
最佳实践
- 使用 TypeScript 配置:获得更好的类型安全性和自动补全
- 利用内置插件:优先使用 Rspack 插件(如有)
- 针对生产环境进行优化:构建时使用生产模式
- 代码分割:使用 optimization.splitChunks 提升性能
- 缓存配置:启用持久化缓存,加快重新构建
- 使用 HMR:启用热模块替换,改善开发体验
资源
- 官方文档: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
关键词
Rspack, rspack, 打包器, webpack, rust, 构建工具, 打包, 代码分割, HMR, 热模块替换, 加载器, 插件, 配置, 入口, 输出, 优化, 开发服务器, 打包工具, 构建工具, 代码分割, 热模块替换, 加载器, 插件, 配置, 入口, 输出, 优化, 开发服务器
评论
支持 Markdown