rzpack

主题

功能 ​

模块热更新 ​

webpack ​

使用的是webpack-dev-server的热更新。React的热更新使用的是@pmmmwh/react-refresh-webpack-plugin插件实现的。React的热更新默认是不开启的，如果需要开启可指定reactRefresh: true开启。

rspack ​

使用的是@rspack/dev-server的热更新。具体参考配置dev-server。

Typescript ​

webpack ​

Rzpack默认支持.ts和.tsx文件。webpack默认使用的打包工具是esbuild，也可通过assets.jsxTools指定使用swc或者esbuild。

ts
export enum JSX_TOOLS {
  ESBUILD = 'esbuild',
  SWC = 'swc',
}

rspack ​

使用内置的swc打包工具。

Css ​

导入.css文件将会把内容开发环境插入到<style>标签中生产环境打包成文件，同时也带有HMR支持。

PostCSS ​

如果项目包含有效的PostCSS配置 (任何受postcss-load-config支持的格式，例如postcss.config.js)，它将会自动应用于所有已导入的CSS。

CSS Modules ​

任何以.module.css为后缀名的 CSS 文件都被认为是一个CSS modules文件。导入这样的文件会返回一个相应的模块对象:

css
/* button.module.css */
.button{
  background: #fff;
}

.button-primary{
  background: blue;
}
js
import classes from './button.module.css'
document.getElementById('btn').className = classes.button
document.getElementById('btn-primary').className = classes.buttonPrimary

默认导入的对象属性名支持小驼峰转换。

Css预处理器 ​

默认支持less。如果需要使用其他预处理器，可以通过rzpackChain属性自行配置webpack/rspack配置。

Css Scoped ​

可通过assets.cssScoped开启类似于Vue的CSS Scoped功能。开启后，会自动识别.scoped.css文件。

静态资源处理 ​

导入一个静态资源会返回解析后的 URL。对于svg来说，默认支持导入为React组件，如果想导入为图片地址则导入时加?url即可。

如果需要图片打包压缩，可指定assets.imageMini: true开启图片压缩，需要注意开启后打包速度将变慢。

JSON ​

JSON 可以被直接导入 —— 同样支持具名导入

Antd主题定制 ​

可通过antdTheme属性进行antd主题定制配置。可指定配置文件也可直接指定变量。

Less变量注入 ​

可通过lessVars属性进行antd主题定制配置。可指定配置文件也可直接指定变量。

控制台输出编译信息 ​

可通过buildInfo: true将项目名、版本号、打包时间、打包分支、最后一次提交commit id输出在控制台。

构建优化 ​

可通过设置cache开启webpack5的缓存，以及通过lazyCompilation开启懒编译。

注意：cache目前因为rspack进支持内存缓存，暂无法支持本地缓存，等rspack支持了，会第一时间支持。

性能优化 ​

可设置gzip开启GZIP压缩，以及moduleFederation配置模块联邦，million使用Million.js进行React性能优化。

接口代理 ​

webpack ​

可通过server配置webpack-dev-server或@rspack/dev-server的接口代理。也可通过proxyFile配置可视化管理接口代理的json文件。注意：当开启可视化配置时，不再需要在server中指定接口代理。