Configuration mapping from webpack to rspack

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

Entry

string ✅

string[] ✅

EntryObject ⚠️

import: EntryItem; ✅
runtime?: string | false; ✅
others ❌

Function ❌

(() => string | EntryObject | string[] | Promise<EntryStatic>) ❌

Context ✅

Mode ✅

Output

Output.assetModuleFilename ⚠️

string ✅
((pathData: PathData, assetInfo?: AssetInfo) => string) ❌

Output.filename ⚠️

string ✅
((pathData: PathData, assetInfo?: AssetInfo) => string) ❌

Output.chunkFilename ⚠️

string ✅
((pathData: PathData, assetInfo?: AssetInfo) => string) ❌

Output.cssFilename ⚠️

string ✅
((pathData: PathData, assetInfo?: AssetInfo) => string) ❌

Output.cssChunkFilename ⚠️

string ✅
((pathData: PathData, assetInfo?: AssetInfo) => string) ❌

Output.path ✅

string

Output.publicPath ⚠️

string ✅
((pathData: PathData, assetInfo?: AssetInfo) => string) ❌

Output.strictModuleErrorHandling ✅

boolean

Output.[...others] ❌

Template strings ⚠️

Compilation-level ⚠️

[fullhash] ✅
[hash] ❌

Chunk-level ✅

[id] ✅
[name] ✅
[chunkhash] ✅
[contenthash] ✅

Module-level ⚠️

[id] ✅
[moduleid] ❌
[hash] ✅
[modulehash] ❌
[contenthash] ✅

File-level ⚠️

[file] ❌
[query] ✅
[fragment] ❌
[base] ❌
[filebase] ❌
[path] ✅
[name] ✅
[ext] ✅

URL-level ❌

[url] ❌

Module

Module.generator ❌

Module.parser ⚠️

Rule

Rule Condition ⚠️

string ✅
RegExp ✅
function ❌

Rule.exclude ✅

Rule.include ✅

Rule.loaders ✅

Prefer to Rule.use

Rule.parse ✅

dataUrlCondition ✅

Rule.generator ⚠️

filename ✅
dataUrl ❌
emit ❌
publicPath ❌
outputPath ❌

Rule.resource ✅

Rule.resourceQuery ✅

Rule.sideEffects ✅

Rule.test ✅

Rule.type ⚠️

asset/resource ✅
asset/inline ✅
asset/source ✅
asset ✅

Other types supported by Rspack:

javascript/auto
typescript
css
css/module
json

Rule.use ⚠️

useEntry ✅
function ❌

Rule.resolve ⚠️

Rule.[...others] ❌

Resolve

Resolve.alias ✅

Resolve.aliasField ⚠️

The types of this configuration are different:

webpack: string[]
Rspack: Boolean

Resolve.conditionNames ✅

Resolve.extensions ⚠️

Default value are diffrent:

webpack: ['.js', '.json', '.wasm']
rspack: ['.tsx', '.jsx', '.ts', '.js', '.json', '.d.ts']

Resolve.fallback ✅

Resolve.mainFields ✅

Resolve.mainFiles ✅

Resolve.modules ✅

Resolve.preferRelative ✅

Resolve.[...Others] ❌

Optimization

Optimization.moduleIds ⚠️

natural ❌
named ✅
deterministic ✅
size ❌

Optimization.minimize ✅

Optimization.minimizer ⚠️ ???

plugins[] ✅
function ❌

Optimization.removeAvailableModules ⚠️

Default value are different:

webpack: only true in production mode
rspack: always true

Optimization.removeEmptyChunks ✅

Optimization.runtimeChunk ⚠️

object ❌
string ❌
boolean ✅

Optimization.sideEffects ✅

Optimization.splitChunks ⚠️

This is truly amazing, their default configurations are completely identical.

splitChunks.automaticNameDelimiter ✅

splitChunks.chunks ✅

splitChunks.maxAsyncRequests ✅

splitChunks.maxInitialRequests ✅

splitChunks.defaultSizeTypes ✅

splitChunks.minChunks ✅

splitChunks.hidePathInfo

splitChunks.minSize ⚠️

number ✅
object ❌

splitChunks.minSizeReduction ⚠️

number ✅
object ❌

splitChunks.enforceSizeThreshold ✅

splitChunks.minRemainingSize ✅

splitChunks.layer ❌

splitChunks.maxSize ✅

splitChunks.maxAsyncSize ✅

splitChunks.maxInitialSize ✅

splitChunks.name ✅

splitChunks.usedExports ❌

splitChunks.cacheGroups ⚠️

Plugins

Some plugins can be replaced by built-in features, refer to this list.

Custom plugin apis : https://www.rspack.dev/api/plugin-api.html

DefinePlugin ✅

use builtins.define

tsconfig-paths-webpack-plugin

use resolve.tsConfigPath

module.exports = {
  resolve: {
    tsConfigPath: true,
  },
};

Loaders

https://www.rspack.dev/guide/loader-compat.html

DevServer ⚠️

// todo

Cache ❌

rspack only supports setting to boolean values.

Devtool ✅

Target ⚠️

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
esX ✅
browserslist ✅

Watch and WatchOptions ❌

Externals ⚠️

string ❌
object ✅
function ❌
RegExp ❌
[] ❌

Performance ❌

Node ❌

use resolve.fallback

Stats ⚠️