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.

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

#output.manifest

#Basic example

#Manifest structure

#Access via hooks

#Options

#filename

#generate

#filter

#Multiple environments

#output.manifest

#Basic example

#Manifest structure

#Access via hooks

#Options

#filename

#generate

#filter

#Multiple environments

output.manifest

Basic example

Manifest structure

Access via hooks

Options

filename

generate

filter

Multiple environments

output.manifest

Basic example

Manifest structure

Access via hooks

Options

filename

generate

filter

Multiple environments