Webpack is an outstanding project that has been developed over many years and supports the building of thousands of web applications.
Rspack is a new project that is dedicated to faster web application builds while also being compatible with the webpack ecosystem.
This is not an official documentation and accuracy is not guaranteed. Only intended for developers as a reference. The rspack team may provide official documentation.
Based on webpack 5.
✅: support
❌: not support
⚠️ : partially support
- import: EntryItem; ✅
- runtime?: string | false; ✅
- others ❌
- (() => string | EntryObject | string[] | Promise) ❌
- string ✅
- ((pathData: PathData, assetInfo?: AssetInfo) => string) ❌
- string ✅
- ((pathData: PathData, assetInfo?: AssetInfo) => string) ❌
- string ✅
- ((pathData: PathData, assetInfo?: AssetInfo) => string) ❌
- string ✅
- ((pathData: PathData, assetInfo?: AssetInfo) => string) ❌
- string ✅
- ((pathData: PathData, assetInfo?: AssetInfo) => string) ❌
- string
- string ✅
- ((pathData: PathData, assetInfo?: AssetInfo) => string) ❌
- boolean
- [fullhash] ✅
- [hash] ❌
- [id] ✅
- [name] ✅
- [chunkhash] ✅
- [contenthash] ✅
- [id] ✅
- [moduleid] ❌
- [hash] ✅
- [modulehash] ❌
- [contenthash] ✅
- [file] ❌
- [query] ✅
- [fragment] ❌
- [base] ❌
- [filebase] ❌
- [path] ✅
- [name] ✅
- [ext] ✅
- [url] ❌
- string ✅
- RegExp ✅
- function ❌
Prefer to Rule.use
- dataUrlCondition ✅
- filename ✅
- dataUrl ❌
- emit ❌
- publicPath ❌
- outputPath ❌
- asset/resource ✅
- asset/inline ✅
- asset/source ✅
- asset ✅
Other types supported by Rspack:
- javascript/auto
- typescript
- css
- css/module
- json
- useEntry ✅
- function ❌
The types of this configuration are different:
- webpack:
string[]
- Rspack:
Boolean
Default value are diffrent:
- webpack:
['.js', '.json', '.wasm']
- rspack:
['.tsx', '.jsx', '.ts', '.js', '.json', '.d.ts']
- natural ❌
- named ✅
- deterministic ✅
- size ❌
- plugins[] ✅
- function ❌
Default value are different:
- webpack: only
true
in production mode - rspack: always
true
- object ❌
- string ❌
- boolean ✅
This is truly amazing, their default configurations are completely identical.
- number ✅
- object ❌
- number ✅
- object ❌
- Some plugins can be replaced by built-in features, refer to this list.
- Custom plugin apis : https://www.rspack.dev/api/plugin-api.html
use builtins.define
use resolve.tsConfigPath
module.exports = {
resolve: {
tsConfigPath: true,
},
};
// todo
rspack only supports setting to boolean values.
- async-node[[X].Y] ❌
- electron[[X].Y]-main ❌
- electron[[X].Y]-renderer ❌
- electron[[X].Y]-preload ❌
- node[[X].Y]
⚠️ node
- node-webkit[[X].Y] ❌
- nwjs[[X].Y] ❌
- web ✅
- webworker
⚠️ - Rename to
web-worker
- Rename to
- esX ✅
- browserslist ✅
- string ❌
- object ✅
- function ❌
- RegExp ❌
- [] ❌
use resolve.fallback
// todo
Although both have the experiments
configuration option, the experimental features of webpack and rspack are completely different, so do not configure webpack's experimental features in rspack.