close
logologo
Guide
Config
Plugin
API
Community
Version
Changelog
Rsbuild 0.x Doc
English
简体中文
Guide
Config
Plugin
API
Community
Changelog
Rsbuild 0.x Doc
English
简体中文
logologo
Overview
root
mode
plugins
logLevel
environments

dev

dev.assetPrefix
dev.browserLogs
dev.cliShortcuts
dev.client
dev.hmr
dev.lazyCompilation
dev.liveReload
dev.progressBar
dev.setupMiddlewares
dev.watchFiles
dev.writeToDisk

resolve

resolve.aliasStrategy
resolve.alias
resolve.conditionNames
resolve.dedupe
resolve.extensions
resolve.mainFields

source

source.assetsInclude
source.decorators
source.define
source.entry
source.exclude
source.include
source.preEntry
source.transformImport
source.tsconfigPath

output

output.assetPrefix
output.charset
output.cleanDistPath
output.copy
output.cssModules
output.dataUriLimit
output.distPath
output.emitAssets
output.emitCss
output.externals
output.filenameHash
output.filename
output.injectStyles
output.inlineScripts
output.inlineStyles
output.legalComments
output.manifest
output.minify
output.module
output.overrideBrowserslist
output.polyfill
output.sourceMap
output.target

html

html.appIcon
html.crossorigin
html.favicon
html.inject
html.meta
html.mountId
html.outputStructure
html.scriptLoading
html.tags
html.templateParameters
html.template
html.title

server

server.base
server.compress
server.cors
server.headers
server.historyApiFallback
server.host
server.htmlFallback
server.https
server.middlewareMode
server.open
server.port
server.printUrls
server.proxy
server.publicDir
server.strictPort

security

security.nonce
security.sri

tools

tools.bundlerChain
tools.cssExtract
tools.cssLoader
tools.htmlPlugin
tools.lightningcssLoader
tools.postcss
tools.rspack
tools.styleLoader
tools.swc

performance

performance.buildCache
performance.bundleAnalyze
performance.chunkSplit
performance.dnsPrefetch
performance.preconnect
performance.prefetch
performance.preload
performance.printFileSize
performance.profile
performance.removeConsole
performance.removeMomentLocale

moduleFederation

moduleFederation.options
📝 Edit this page on GitHub
Previous Pageoutput.legalComments
Next Pageoutput.minify

#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 = {
  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[];
};

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