从 Webpack 迁移
虽然 Rspack 尽可能地兼容了 webpack 的常用 API，但是不可避免地存在一些不同，或是相同的功能在 Rspack 中有更高性能的实现方式。
修改配置
可以参考「Webpack 配置兼容性」进行配置迁移。
处理 Loader
移除 babel-loader
Rspack 已经内置了对 TypeScript、JSX 以及最新的 JavaScript 语法的支持，这意味着如果你的 babel-loader 只是为了支持 TypeScript、JSX 以及更新的 JavaScript 语法，那么完全可以移除 babel-loader。
如果你的 babel-loader 是为了支持自定义的转换逻辑，那么这部分的 babel-loader 可以保留，但是我们不鼓励用户对大量的文件使用 babel-loader，因为这会导致严重的性能恶化。
module.exports = {
module: {
- rules: [
- {
- test: /\.tsx?$/i,
- use: [
- {
- loader: 'babel-loader',
- options: {
- presets: ['@babel/preset-typescript'],
- },
- },
- ],
- test: /\.jsx?$/i,
- use: [
- {
- loader: 'babel-loader',
- options: {
- presets: ['@babel/preset-react'],
- },
- },
- ],
- },
- ],
},
};同时，Rspack 还默认支持了 JavaScript 语法降级的功能，这意味着你不需要再使用 babel-loader 来处理浏览器兼容性，你可以通过 target 和 builtins.presetEnv 来指定浏览器兼容范围。
module.exports = {
+ builtins: {
+ presetEnv: {
+ targets: ['Chrome >= 48'],
+ },
+ },
+ target: ['web', 'es5'],
module: {
rules: [
- {
- test: /\.jsx?$/i,
- use: [
- {
- loader: 'babel-loader',
- options: {
- presets: ['@babel/preset-env'],
- },
- },
- ],
- },
],
},
};移除 css-loader 、 style-loader 和 mini-css-extract-plugin
Rspack 内置支持了 css 模块类型 ，原生 css 模块类型内置了对 css、css hmr、css module 以及 css 提取功能的支持，这意味着你不需要再为 css 文件单独配置 css-loader、style-loader 和 mini-css-extract-plugin。
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
- {
- test: /\.css$/i,
- use: [
- isDev ? "style-loader" : MiniCssExtractPlugin.loader,
- "css-loader",
- ],
- },
+ {
+ test: /\.css$/i,
+ type: "css", // this is enabled by default for .css, so you don't need to specify it
+ },
],
},
plugins: [],
};对于 css-modules 的功能，通过指明 css/module 作为模块类型即可开启。
module.exports = {
module: {
rules: [
+ {
+ test: /\.module\.css$/i,
+ type: "css/module", // this is enabled by default for module.css, so you don't need to specify it
+ },
],
},
};使用 Asset Modules 来代替 file-loader、url-loader 和 raw-loader
Rspack 对齐 webpack 5 的 Asset Modules，这意味着你可以使用 Asset Modules 来代替 file-loader 和 url-loader。
module.exports = {
module: {
rules: [
+ {
+ test: /\.(png|jpe?g|gif)$/i,
+ type: "asset/resource",
+ },
+ {
+ test: /^BUILD_ID$/,
+ type: "asset/source",
+ },
- {
- test: /\.(png|jpe?g|gif)$/i,
- use: ["file-loader"],
- },
- {
- test: /^BUILD_ID$/,
- use: ["raw-loader",],
- },
],
},
};处理 Plugins
使用 builtins.html 来代替 html-webpack-plugin
Rspack 内置了对 html 的支持，这意味着你可以使用 builtins.html 来代替 html-webpack-plugin。
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
+ builtins: {
+ html: [
+ {
+ template: "index.html",
+ filename: "index.html",
+ },
+ ],
+ },
- plugins: [
- new HtmlWebpackPlugin({
- template: "index.html",
- filename: "index.html",
- }),
- ],
};