> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Module generator

`module.generator` controls how Rspack turns parsed modules into output code or emitted assets. It affects output-related behavior such as asset filenames, public paths, CSS Modules exports, and other generation settings for each module type.

## generator

- **Type:** `Object`
- **Default:** `{}`

Use `module.generator` to define output generation options for each module type.

Available generator option groups:

- `asset`, `asset/inline`, `asset/resource`: [Asset generator options](#asset)
- `css`, `css/auto`, `css/global`, `css/module`: [CSS generator options](#cssauto)
- `json`: [JSON generator options](#jsonjsonparse)

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      // Generator options for asset modules
      asset: {
        dataUrl: {
          encoding: false,
          mimetype: 'image/png',
        },
        filename: '[name]-[contenthash][ext]',
        publicPath: 'https://cdn.example.com/',
      },
      // Generator options for asset/inline modules
      'asset/inline': {
        dataUrl: {
          encoding: false,
          mimetype: 'image/png',
        },
      },
      // Generator options for asset/resource modules
      'asset/resource': {
        emit: true,
        filename: '[name]-[contenthash][ext]',
        publicPath: 'https://cdn.example.com/',
      },
      // Generator options for css/auto modules
      'css/auto': {
        exportsConvention: 'as-is',
        exportsOnly: false,
        localIdentHashDigest: 'base64url',
        localIdentHashDigestLength: 6,
        localIdentHashFunction: 'xxhash64',
        localIdentHashSalt: 'my-salt',
        localIdentName: '[uniqueName]-[id]-[local]',
        esModule: true,
      },
      // Generator options for `css` modules
      css: {
        exportsOnly: false,
        esModule: true,
      },
      // Generator options for css/global modules
      'css/global': {
        exportsConvention: 'as-is',
        exportsOnly: false,
        localIdentHashDigest: 'base64url',
        localIdentHashDigestLength: 6,
        localIdentHashFunction: 'xxhash64',
        localIdentHashSalt: 'my-salt',
        localIdentName: '[uniqueName]-[id]-[local]',
        esModule: true,
      },
      // Generator options for css/module modules
      'css/module': {
        exportsConvention: 'as-is',
        exportsOnly: false,
        localIdentHashDigest: 'base64url',
        localIdentHashDigestLength: 6,
        localIdentHashFunction: 'xxhash64',
        localIdentHashSalt: 'my-salt',
        localIdentName: '[uniqueName]-[id]-[local]',
        esModule: true,
      },
      // Generator options for `json` modules
      json: {
        JSONParse: true,
      },
    },
  },
};
```

### asset

Generator options for `asset` modules.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      asset: {
        // options
      },
    },
  },
};
```

### asset.binary

- **Type:** `boolean | undefined`
- **Default:** `undefined`

Whether or not this asset module should be considered binary. This can be set to `false` to treat this asset module as text.
If not set, the module type will be used to determine if the module is binary.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      asset: {
        binary: false,
      },
    },
  },
};
```

### asset.dataUrl

- **Type:** `Object | (source: Buffer, context: { filename: string, module: Module }) => string`
- **Default:** `{}`

Only for modules with module type `'asset'` or `'asset/inline'`.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      asset: {
        dataUrl: {
          encoding: 'base64',
          mimetype: 'image/png',
        },
      },
    },
  },
};
```

When used as a function, it executes for every module and must return a data URI string.

```js title="rspack.config.mjs"
import svgToMiniDataURI from 'mini-svg-data-uri';

export default {
  module: {
    generator: {
      asset: {
        dataUrl: ({ content }) => {
          return svgToMiniDataURI(content);
        },
      },
    },
  },
};
```

### asset.dataUrl.encoding

- **Type:** `false | 'base64'`
- **Default:** `'base64'`

When set to 'base64', module source will be encoded using Base64 algorithm. Setting encoding to false will disable encoding. Only for modules with module type `'asset'` or `'asset/inline'`.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      asset: {
        dataUrl: {
          encoding: false,
        },
      },
    },
  },
};
```

### asset.dataUrl.mimetype

- **Type:** `string`
- **Default:** `require('mime-types').lookup(ext)`

A mimetype for data URI. Resolves from module resource extension by default. Only for modules with module type `'asset'` or `'asset/inline'`.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      asset: {
        dataUrl: {
          mimetype: 'image/png',
        },
      },
    },
  },
};
```

### asset.importMode

- **Type:** `'url' | 'preserve'`
- **Default:** `'url'`

If `"url"`, a URL pointing to the asset will be generated based on [publicPath](#assetpublicpath).
If `"preserve"`, preserve import/require statement from generated asset.

Only for modules with module type `'asset'` or `'asset/resource'`.

- `'asset'`:

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      asset: {
        importMode: 'preserve',
      },
    },
  },
};
```

- `'asset/resource'`:

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/resource': {
        importMode: 'preserve',
      },
    },
  },
};
```

### asset.filename

- **Type:** `string | ((pathData: PathData, assetInfo?: AssetInfo) => string)`
- **Default:** `undefined`
- **Supported Template string:** see [`output.assetModuleFilename`](/config/output.md#outputassetmodulefilename)

Same as `output.assetModuleFilename`. Overrides `output.assetModuleFilename` and only works for `asset` and `asset/resource` module types.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      asset: {
        filename: 'static/[hash][ext]',
      },
    },
  },
};
```

### asset.outputPath

- **Type:** `string | ((pathData: PathData, assetInfo?: AssetInfo) => string)`
- **Default:** `undefined`

Emit the asset in the specified folder relative to [`output.path`](/config/output.md#outputpath).

Only for modules with module type `'asset'` or `'asset/resource'`.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      asset: {
        outputPath: 'foo/',
      },
    },
  },
};
```

### asset.publicPath

- **Type:** `string | ((pathData: PathData, assetInfo?: AssetInfo) => string)`
- **Default:** `undefined`

Override [`output.publicPath`](/config/output.md#outputpublicpath), only for modules with module type `'asset'` or `'asset/resource'`.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      asset: {
        publicPath: 'https://cdn.example.com/',
      },
    },
  },
};
```

### asset.emit

- **Type:** `boolean`
- **Default:** `true`

Whether to output assets to disk. You can set this option to `false` to avoid outputting unnecessary files for some scenarios such as SSR.

Only for modules with module type `'asset'` or `'asset/resource'`.

- `'asset'`:

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      asset: {
        emit: false,
      },
    },
  },
};
```

- `'asset/resource'`:

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/resource': {
        emit: false,
      },
    },
  },
};
```

### \["asset/inline"]

Generator options for `asset/inline` modules.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/inline': {
        // options
      },
    },
  },
};
```

### \["asset/inline"].binary

Same as [`module.generator["asset"].binary`](#assetbinary).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/inline': {
        binary: false,
      },
    },
  },
};
```

### \["asset/inline"].dataUrl

Same as [`module.generator["asset"].dataUrl`](#assetdataurl).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/inline': {
        dataUrl: {
          // options
        },
      },
    },
  },
};
```

### \["asset/inline"].dataUrl.encoding

Same as [`module.generator["asset"].dataUrl.encoding`](#assetdataurlencoding).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/inline': {
        dataUrl: {
          encoding: false,
        },
      },
    },
  },
};
```

### \["asset/inline"].dataUrl.mimetype

Same as [`module.generator["asset"].dataUrl.mimetype`](#assetdataurlmimetype).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/inline': {
        dataUrl: {
          mimetype: 'image/png',
        },
      },
    },
  },
};
```

### \["asset/resource"]

Generator options for `asset/resource` modules.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/resource': {
        // options
      },
    },
  },
};
```

### \["asset/resource"].binary

Same as [`module.generator["asset"].binary`](#assetbinary).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/resource': {
        binary: false,
      },
    },
  },
};
```

### \["asset/resource"].importMode

Same as [`module.generator["asset"].importMode`](#assetimportmode).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/resource': {
        importMode: 'preserve',
      },
    },
  },
};
```

### \["asset/resource"].filename

Same as [`module.generator["asset"].filename`](#assetfilename).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/resource': {
        filename: 'static/[hash][ext]',
      },
    },
  },
};
```

### \["asset/resource"].outputPath

Same as [`module.generator["asset"].outputPath`](#assetoutputpath).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/resource': {
        outputPath: 'foo/',
      },
    },
  },
};
```

### \["asset/resource"].publicPath

Same as [`module.generator["asset"].publicPath`](#assetpublicpath).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/resource': {
        publicPath: 'https://cdn.example.com/',
      },
    },
  },
};
```

### \["asset/resource"].emit

Same as [`module.generator["asset"].emit`](#assetemit).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'asset/resource': {
        emit: false,
      },
    },
  },
};
```

### \["css/auto"]

Generator options for `css/auto` modules.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/auto': {
        // options
      },
    },
  },
};
```

### \["css/auto"].exportsConvention

- **Type:** `'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only'`
- **Default:** `'as-is'`

Customize how CSS export names are exported to javascript modules, such as keeping them as is, transforming them to camel case, etc.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/auto': {
        exportsConvention: 'camel-case',
      },
    },
  },
};
```

### \["css/auto"].exportsOnly

- **Type:** `boolean`
- **Default:** `true` when the target has no document support, otherwise `false`.

If `true`, **only exports** the identifier mappings from CSS into the output JavaScript files, without embedding any stylesheets in the template. Useful if you are using CSS Modules for pre-rendering (e.g. SSR).

If `false`, generate stylesheets and embed them in the template.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/auto': {
        exportsOnly: false,
      },
    },
  },
};
```

### \["css/auto"].localIdentName

- **Type:** `string`
- **Default:** `[uniqueName]-[id]-[local]` in development mode when [`output.uniqueName`](/config/output.md#outputuniquename) is non-empty, `[id]-[local]` in development mode otherwise, and `[fullhash]` in production mode.

Customize the format of the local class names generated for CSS modules, besides the substitutions at [File-level](/config/filename-placeholders.md#file-placeholders) and [Module-level](/config/filename-placeholders.md#module-placeholders), also include `[uniqueName]` and `[local]`.

Starting from Rspack `2.0.7`, the `[hash]` placeholder in `localIdentName` uses different hash inputs depending on whether the template includes `[local]`. When `localIdentName` does not include `[local]`, the local name is included in the hash input so different local names in the same CSS module generate different values. When `localIdentName` includes `[local]`, the local name is not included in the `[hash]` input because `[local]` already keeps the generated class name unique.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/auto': {
        localIdentName: '[local]-[hash:base64:6]',
      },
    },
  },
};
```

### \["css/auto"].localIdentHashDigest

- **Type:** `string`
- **Default:** `'base64url'`

Configure the digest encoding used for hashes in generated CSS Modules local identifiers. This has the same supported values as [`output.hashDigest`](/config/output.md#outputhashdigest).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/auto': {
        localIdentHashDigest: 'hex',
      },
    },
  },
};
```

### \["css/auto"].localIdentHashDigestLength

- **Type:** `number`
- **Default:** `6`

Configure how many characters from the hash are used in generated CSS Modules local identifiers.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/auto': {
        localIdentHashDigestLength: 8,
      },
    },
  },
};
```

### \["css/auto"].localIdentHashFunction

- **Type:** `string`
- **Default:** [`output.hashFunction`](/config/output.md#outputhashfunction), which defaults to `'xxhash64'`

Configure the hash function used for generated CSS Modules local identifiers. This has the same supported values as [`output.hashFunction`](/config/output.md#outputhashfunction).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/auto': {
        localIdentHashFunction: 'xxhash64',
      },
    },
  },
};
```

### \["css/auto"].localIdentHashSalt

- **Type:** `string`
- **Default:** [`output.hashSalt`](/config/output.md#outputhashsalt), which defaults to `undefined`

Configure a salt added to the hash used for generated CSS Modules local identifiers. When unset, Rspack uses [`output.hashSalt`](/config/output.md#outputhashsalt).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/auto': {
        localIdentHashSalt: 'my-salt',
      },
    },
  },
};
```

### \["css/auto"].esModule

- **Type:** `boolean`
- **Default:** `true`

This configuration is available for improved ESM-CJS interoperability purposes.

Whether to add `__esModule` to the exports of CSS; if added, it will be treated as ES modules during ESM-CJS interop, otherwise, it will be treated as a CommonJS Module.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/auto': {
        esModule: true,
      },
    },
  },
};
```

For example, a common use case, when using the CommonJS output from a third-party component library, it is sometimes necessary to add this configuration to ensure correct ESM-CJS interop, to obtain the correct exports (this can be used in conjunction with [rules\[\].test](/config/module-rules.md#rulestest) and other matching conditions to add it only for that particular component library).

The original source code of the third-party component library:

```js
import style from './style.css';

export function Button() {
  return <button className={style.btn}></button>;
}
```

The CommonJS format output published by the third-party component library:

```js
'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.Button = Button;
var _style = _interopRequireDefault(require('./style.css'));
var _jsxRuntime = require('react/jsx-runtime');
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}
function Button() {
  return /*#__PURE__*/ (0, _jsxRuntime.jsx)('button', {
    className: _style['default'].btn, // <-- Note: After passing through _interopRequireDefault, this need to access default here.
  });
}
```

### css

Generator options for `css` modules.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      css: {
        // options
      },
    },
  },
};
```

### css.exportsOnly

Same as [`module.generator["css/auto"].exportsOnly`](#cssautoexportsonly).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      css: {
        exportsOnly: false,
      },
    },
  },
};
```

### css.esModule

Same as [`module.generator["css/auto"].esModule`](#cssautoesmodule).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      css: {
        esModule: true,
      },
    },
  },
};
```

### \["css/global"]

Generator options for `css/global` modules.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/global': {
        // options
      },
    },
  },
};
```

### \["css/global"].exportsConvention

Same as [`module.generator["css/auto"].exportsConvention`](#cssautoexportsconvention).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/global': {
        exportsConvention: 'camel-case',
      },
    },
  },
};
```

### \["css/global"].exportsOnly

Same as [`module.generator["css/auto"].exportsOnly`](#cssautoexportsonly).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/global': {
        exportsOnly: false,
      },
    },
  },
};
```

### \["css/global"].localIdentName

Same as [`module.generator["css/auto"].localIdentName`](#cssautolocalidentname).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/global': {
        localIdentName: '[local]-[hash:base64:6]',
      },
    },
  },
};
```

### \["css/global"].localIdentHashDigest

Same as [`module.generator["css/auto"].localIdentHashDigest`](#cssautolocalidenthashdigest).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/global': {
        localIdentHashDigest: 'hex',
      },
    },
  },
};
```

### \["css/global"].localIdentHashDigestLength

Same as [`module.generator["css/auto"].localIdentHashDigestLength`](#cssautolocalidenthashdigestlength).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/global': {
        localIdentHashDigestLength: 8,
      },
    },
  },
};
```

### \["css/global"].localIdentHashFunction

Same as [`module.generator["css/auto"].localIdentHashFunction`](#cssautolocalidenthashfunction).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/global': {
        localIdentHashFunction: 'xxhash64',
      },
    },
  },
};
```

### \["css/global"].localIdentHashSalt

Same as [`module.generator["css/auto"].localIdentHashSalt`](#cssautolocalidenthashsalt).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/global': {
        localIdentHashSalt: 'my-salt',
      },
    },
  },
};
```

### \["css/global"].esModule

Same as [`module.generator["css/auto"].esModule`](#cssautoesmodule).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/global': {
        esModule: true,
      },
    },
  },
};
```

### \["css/module"]

Generator options for `css/module` modules.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/module': {
        // options
      },
    },
  },
};
```

### \["css/module"].exportsConvention

Same as [`module.generator["css/auto"].exportsConvention`](#cssautoexportsconvention).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/module': {
        exportsConvention: 'camel-case',
      },
    },
  },
};
```

### \["css/module"].exportsOnly

Same as [`module.generator["css/auto"].exportsOnly`](#cssautoexportsonly).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/module': {
        exportsOnly: false,
      },
    },
  },
};
```

### \["css/module"].localIdentName

Same as [`module.generator["css/auto"].localIdentName`](#cssautolocalidentname).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/module': {
        localIdentName: '[local]-[hash:base64:6]',
      },
    },
  },
};
```

### \["css/module"].localIdentHashDigest

Same as [`module.generator["css/auto"].localIdentHashDigest`](#cssautolocalidenthashdigest).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/module': {
        localIdentHashDigest: 'hex',
      },
    },
  },
};
```

### \["css/module"].localIdentHashDigestLength

Same as [`module.generator["css/auto"].localIdentHashDigestLength`](#cssautolocalidenthashdigestlength).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/module': {
        localIdentHashDigestLength: 8,
      },
    },
  },
};
```

### \["css/module"].localIdentHashFunction

Same as [`module.generator["css/auto"].localIdentHashFunction`](#cssautolocalidenthashfunction).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/module': {
        localIdentHashFunction: 'xxhash64',
      },
    },
  },
};
```

### \["css/module"].localIdentHashSalt

Same as [`module.generator["css/auto"].localIdentHashSalt`](#cssautolocalidenthashsalt).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/module': {
        localIdentHashSalt: 'my-salt',
      },
    },
  },
};
```

### \["css/module"].esModule

Same as [`module.generator["css/auto"].esModule`](#cssautoesmodule).

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      'css/module': {
        esModule: true,
      },
    },
  },
};
```

### json.JSONParse

- **Type:** `boolean`
- **Default:** `true`

Use `JSON.parse` when the JSON string is longer than 20 characters.

```js title="rspack.config.mjs"
export default {
  module: {
    generator: {
      json: {
        JSONParse: false,
      },
    },
  },
};
```


This page is adapted from [webpack documentation](https://webpack.js.org/configuration/module/) under the [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), with modifications.