虽然 Rspack 尽可能地兼容了 webpack 的常用 API,但是不可避免地存在一些不同,或是相同的功能在 Rspack 中有更高性能的实现方式。
可以参考「Webpack 配置兼容性」进行配置迁移。
Rspack 使用 builtin:swc-loader 对 TypeScript、JSX 以及最新的 JavaScript 语法进行转换,这意味着如果你的 babel-loader 只是为了支持 TypeScript、JSX 以及更新的 JavaScript 语法,那么完全可以使用 builtin:swc-loader 替代 babel-loader。
如果你的 babel-loader 是为了支持自定义的转换逻辑,那么这部分的 babel-loader 可以保留,但是我们不鼓励用户对大量的文件使用 babel-loader,因为这会导致严重的性能恶化。
Rspack 内置支持了 CSS 模块类型 ,原生 CSS 模块类型内置了对 CSS、CSS HMR、CSS Modules 以及 CSS 提取功能的支持,这意味着你不需要再为 CSS 文件单独配置 css-loader、style-loader 和 mini-css-extract-plugin。
对于 css-modules 的功能,通过指明 css/module 作为模块类型即可开启。
如果依赖 css-loader,例如 css-loader 提供的一些更加定制化的配置项,仍然可以使用 style-loader + css-loader 方案,如果你想要在生产环境将 CSS 提取成单独的文件,可以使用 Rspack 内置的 CssExtractRspackPlugin 插件。
CssExtractRspackPlugin 插件功能和配置与 mini-css-extract-plugin 类似,使用前请确保开启了 experiments.rspackFuture.newTreeshaking
,v0.6 之后的版本默认开启。
Rspack 对齐 webpack 5 的 Asset Modules,这意味着你可以使用 Asset Modules 来代替 file-loader 和 url-loader。