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 information about all assets and the mapping between entry modules 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

The manifest file will be output with the following structure by default:

type FilePath = string;

type ManifestList = {
  /**
   * A flat list of all emitted asset files.
   */
  allFiles: FilePath[];
  /**
   * Maps each entry name to its associated output files.
   */
  entries: {
    [entryName: string]: {
      /**
       * Files that are required during the initial load of the entry.
       */
      initial?: {
        /** Initial JavaScript files for this entry. */
        js?: FilePath[];
        /** Initial CSS files for this entry. */
        css?: FilePath[];
      };
      /**
       * Files that may be loaded asynchronously.
       * Usually code-split chunks or lazily loaded chunks.
       */
      async?: {
        /** Async JavaScript files for this entry. */
        js?: FilePath[];
        /** Async CSS files for this entry. */
        css?: FilePath[];
      };
      /** HTML files generated for this entry, if any. */
      html?: FilePath[];
      /**
       * Additional assets associated with this entry.
       * For example images、fonts、source maps and other non JS or CSS files.
       */
      assets?: FilePath[];
    };
    /**
     * Subresource Integrity (SRI) hashes for emitted assets.
     * The key is the asset file path, and the value is its integrity hash.
     * This field is available only when the `security.sri` option is enabled.
     */
    integrity: Record<string, string>;
  };
};

Access via hooks

You can access the generated manifest data through Rsbuild's hooks and Environment API.

For example:

api.onAfterBuild(({ environments }) => {
  console.log(environments.web.manifest);
});

See Environment API - manifest for more details.

SRI

When the security.sri option is enabled, the manifest file includes an integrity field that stores the SRI hash for assets that support Subresource Integrity, such as JavaScript and CSS files.

rsbuild.config.ts

export default {
  security: {
    sri: {
      enable: 'auto',
    },
  },
  output: {
    manifest: true,
  },
};

dist/manifest.json

{
  "allFiles": ["/static/js/index.[hash].js", "/index.html"],
  "integrity": {
    "/static/js/index.[hash].js": "sha384-[sri-hash]"
  }
}

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:

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 manifest file content based on files. The files structure:

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:

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,
    },
  },
};

Multiple environments

When using environments with multiple environments, please specify a unique manifest.filename value for each environment to prevent manifest files from different environments from overwriting each other.

For example, use the default manifest.json for the web environment and use manifest-node.json for the node environment:

rsbuild.config.ts

export default {
  environments: {
    web: {
      output: {
        manifest: true,
      },
    },
    node: {
      output: {
        target: 'node',
        manifest: {
          filename: 'manifest-node.json',
        },
      },
    },
  },
};

You can also choose to generate the manifest file only for specific environments:

rsbuild.config.ts

export default {
  environments: {
    web: {
      output: {
        manifest: true,
      },
    },
    node: {
      output: {
        target: 'node',
      },
    },
  },
};

Version history

Version	Changes
v1.6.8	Added `integrity` field

#output.manifest

#Basic example

#Manifest structure

#Access via hooks

#SRI

#Options

#filename

#generate

#filter

#Multiple environments

#Version history

#output.manifest

#Basic example

#Manifest structure

#Access via hooks

#SRI

#Options

#filename

#generate

#filter

#Multiple environments

#Version history

output.manifest

Basic example

Manifest structure

Access via hooks

SRI

Options

filename

generate

filter

Multiple environments

Version history

output.manifest

Basic example

Manifest structure

Access via hooks

SRI

Options

filename

generate

filter

Multiple environments

Version history