output.manifest
- Type:
string | boolean
- Default:
false
Configure how to generate the manifest file.
true
: Generate a manifest file named manifest.json
in the output directory.
false
: Do not generate the manifest file.
string
: Generate a manifest file with the specified filename or path.
object
: Generate a manifest file with the specified options.
The manifest file contains the information of all assets, and the mapping relationship between entry module and assets.
Basic example
Enable the asset manifest:
rsbuild.config.ts
export default {
output: {
manifest: true,
},
};
After building, Rsbuild will generate a dist/manifest.json
file:
dist/manifest.json
{
"allFiles": [
"/static/css/index.[hash].css",
"/static/js/index.[hash].js",
"/static/images/logo.[hash].png",
"/index.html"
],
"entries": {
"index": {
"initial": {
"js": ["/static/js/index.[hash].js"],
"css": ["/static/css/index.[hash].css"]
},
"assets": ["/static/images/logo.[hash].png"],
"html": ["/index.html"]
}
}
}
Manifest structure
By default, the manifest file will be output in the following structure:
type FilePath = string;
type ManifestList = {
entries: {
/** The key is the entry name, from Rsbuild's source.entry config. */
[entryName: string]: {
initial?: {
js?: FilePath[];
css?: FilePath[];
};
async?: {
js?: FilePath[];
css?: FilePath[];
};
/** HTML files related to the current entry */
html?: FilePath[];
/** other assets (e.g. png、svg、source map) related to the current entry */
assets?: FilePath[];
};
};
/** Flatten all assets */
allFiles: FilePath[];
};
Options
output.manifest
can be an object, here are all the options:
filename
- Type:
string
- Default:
'manifest.json'
Specify the name or path of the manifest file.
filename
can be a path relative to the dist
directory, for example, output to dist/static/my-manifest.json
:
rsbuild.config.ts
export default {
output: {
manifest: {
filename: './static/my-manifest.json',
},
},
};
This can be simplified as:
rsbuild.config.ts
export default {
output: {
manifest: './static/my-manifest.json',
},
};
generate
type ManifestGenerate = (params: {
files: FileDescriptor[];
manifestData: ManifestData;
}) => Record<string, unknown>;
- Default:
undefined
- Version:
>= 1.2.0
With the manifest.generate
function, you can customize the content of the manifest file. The function receives the following parameters:
files
: The description information of all output files.
manifestData
: The default manifest data.
For example, only keep the allAssets
field:
rsbuild.config.ts
export default {
output: {
manifest: {
generate: ({ manifestData }) => {
return {
allAssets: manifestData.allFiles,
};
},
},
},
};
You can also customize the content of the manifest file based on files
. The files
structure is as follows:
interface FileDescriptor {
name: string;
path: string;
isAsset: boolean;
isChunk: boolean;
isInitial: boolean;
isModuleAsset: boolean;
chunk?: import('@rspack/core').Chunk;
}
Here is an example of files
:
const files = [
{
name: 'index.js',
path: '/static/js/index.[hash].js',
isAsset: false,
isChunk: true,
isInitial: true,
isModuleAsset: false,
chunk: {
// Chunk info...
},
},
{
name: 'index.html',
path: '/index.html',
isAsset: true,
isChunk: false,
isInitial: false,
isModuleAsset: false,
},
];
filter
type ManifestFilter = (file: FileDescriptor) => boolean;
- Default:
file => !file.name.endsWith('.LICENSE.txt')
- Version:
>= 1.2.0
Allows you to filter the files included in the manifest. The function receives a file
parameter and returns true
to keep the file, or false
to exclude it.
By default, *.LICENSE.txt
files are excluded from the manifest, as these license files are only used to declare open source licenses and are not used at runtime.
For example, to only keep *.js
files:
rsbuild.config.ts
export default {
output: {
manifest: {
filter: (file) => file.name.endsWith('.js'),
},
},
};
The generated manifest file will only include *.js
files:
dist/manifest.json
{
"allFiles": ["/static/js/index.[hash].js"],
"entries": {
"index": {
"initial": {
"js": ["/static/js/index.[hash].js"]
}
}
}
}
Or include all files:
rsbuild.config.ts
export default {
output: {
manifest: {
filter: () => true,
},
},
};