从Webpack迁移到Rspack

迁移指南：https://rspack.dev/zh/guide/migration/webpack

1. 安装rspack依赖

npm add @rspack/core @rspack/cli -D

2. 移除webpack相关依赖

npm remove webpack webpack-cli webpack-dev-server

3. 创建rspack配置文件

        根目录下创建rspack文件夹，开发环境配置读取 rspack.dev.ts 文件，生产环境读取 rspack.prod.ts文件

4. 替换webpack插件

  将 Webpack 插件替换为 Rspack 的等效插件。如下：

说明	现	原
定义全局常量	rspack.DefinePlugin	webpack.DefinePlugin
自动生成 HTML 文件，并自动注入打包后的资源（如 JS、CSS）	rspack.HtmlRspackPlugin	html-webpack-plugin
将 CSS 提取到单独的文件中，而不是嵌入到 JS 文件中	rspack.CssExtractRspackPlugin	mini-css-extract-plugin
将文件或目录复制到构建输出目录	rspack.CopyRspackPlugin	copy-webpack-plugin
显示 Webpack 构建进度	rspack.ProgressPlugin	webpack.ProgressPlugin
在每次构建前清理输出目录	output.clean	clean-webpack-plugin
转译 JavaScript 代码	builtin:swc-loader	babel-loader
处理静态资源文件	asset/resource	file-loader

5. 更新脚本命令

{ "scripts": { "dev": "rspack serve -c rspack/rspack.dev.ts", // 开发环境 "build": "rspack build -c rspack/rspack.prod.ts" // 生产环境 } 
}

6. 测试和验证

1. 运行 npm run dev，检查开发服务器启动速度和热更新性能。

2. 运行 npm run build，检查生产构建的完整性和性能。