import WebpackLicense from '@components/WebpackLicense'; import { ApiMeta, Stability } from '../../../components/ApiMeta'; import PropertyType from '@components/PropertyType';

Entry

Type:

type EntryStatic =
  | string
  | string[]
  | Record<string, string | string[] | EntryDescription>;

type Entry = EntryStatic | (() => EntryStatic | Promise<EntryStatic>);

Default: './src/index.js'

The entry configuration is used to set the entry module for Rspack builds.

Single entry

If you are building a single page application or a library, you will usually only need to set up a single entry point.

To set up a single entry, simply pass the path to the entry module as a string to the entry configuration.

export default {
  entry: './src/index.js',
};

The above writing method will automatically set the name of the entry module to main, which is equivalent to the following writing method:

export default {
  entry: {
    main: './src/index.js',
  },
};

Path type

The path of the entry module can be a relative path or an absolute path.

If entry is set as a relative path, Rspack will use the value set by context configuration as the base path, which by default is the current working directory of the Node.js process, namely process.cwd().

You can also use the path module in Node.js to generate an absolute path and pass it to the entry configuration:

import path from 'node:path';

export default {
  entry: path.join(__dirname, './src/index.js'),
};

Entry array

When setting the value of an entry, in addition to setting it to string, you can also pass in a string[], meaning that the entry contains multiple entry modules.

For example, the following example will build pre.js and post.js into the output of page.

export default {
  entry: {
    page: ['./src/pre.js', './src/post.js'],
  },
};

When an array is used for an entry, Rspack still creates a single chunk for that entry. Modules in the array are loaded in declaration order and merged into the same dependency graph, so pre.js runs before post.js.

This pattern is commonly used to inject extra code before the main application entry, such as polyfills or development-only tooling, without adding manual imports in application source files.

Example: Injecting a polyfill

export default {
  entry: {
    main: ['./src/polyfill.js', './src/index.js'],
  },
};

Multiple entries

If you need to build multiple entries at once, you should set entry to an object, and each key of the object corresponds to an entry name.

For example, the following example will build page1 and page2 as two entries:

export default {
  entry: {
    page1: './src/page1/index.js',
    page2: './src/page2/index.js',
  },
};

Entry description object

When you set entry to an object, you can set the value of the entry to a description object. A description object can contain the following properties:

EntryDescription.import

The path or paths to the entry modules.

export default {
  entry: {
    foo: {
      import: './src/foo.js',
    },
  },
};

Multiple paths can be set in the import property:

export default {
  entry: {
    foo: {
      import: ['./src/foo.js', './src/bar.js'],
    },
  },
};

EntryDescription.runtime

The name of the runtime chunk. When runtime is set, a new runtime chunk will be created. You can also set it to false to avoid a new runtime chunk.

The runtime property is used to set the name of the runtime chunk, for example to set the name of the main entry chunk to 'foo':

export default {
  entry: {
    main: {
      import: './src/index.js',
      runtime: 'foo',
    },
  },
};

EntryDescription.chunkLoading

How this entry load other chunks. Methods included by default are 'jsonp' (web), 'import' (ESM), 'import-scripts' (WebWorker), 'require' (sync node.js), 'async-node' (async node.js), but others might be added by plugins.

EntryDescription.asyncChunks

Whether to create a load-on-demand asynchronous chunk for this entry.

EntryDescription.publicPath

<PropertyType type="'auto' | string | (pathData: PathData, assetInfo?: AssetInfo) => string" defaultValueList={[{ defaultValue: 'undefined' }]} />

The publicPath of the resource referenced by this entry.

EntryDescription.baseUri

The baseURI of the resource referenced by this entry.

EntryDescription.filename

The filename of the entry chunk.

EntryDescription.library

Type: LibraryOptions
Default: undefined

The format of the chunk generated by this entry as a library, for detailed configuration, see output.library.

EntryDescription.dependOn

The entry that the current entry depends on. With dependOn option you can share the modules from one entry chunk to another.

EntryDescription.wasmLoading

Option to set the method of loading WebAssembly Modules. Methods included by default are 'fetch' (web/WebWorker), 'async-node' (Node.js), but others might be added by plugins.

The default value can be affected by different target:

Defaults to 'fetch' if target is set to 'web', 'webworker', 'electron-renderer' or 'node-webkit'.
Defaults to 'async-node' if target is set to 'node', 'async-node', 'electron-main' or 'electron-preload'.

EntryDescription.layer

Specifies the layer in which modules of this entrypoint are placed. Make the corresponding configuration take effect through layer matching in split chunks, rules, stats, and externals.

For more information about layers, see the Layer guide.

export default {
  entry: {
    index: {
      import: './src/index.js',
      layer: 'layer-name',
    },
  },
};

Dynamic entry

If a function is passed then it will be invoked on every make event.

Note that the make event triggers when Rspack starts and for every invalidation when watching for file changes.

export default {
  entry: () => './demo',
};

Or:

export default {
  entry: () => new Promise((resolve) => resolve(['./demo', './demo2'])),
};

For example: you can use dynamic entries to get the actual entries from an external source (remote server, file system content or database):

export default {
  entry() {
    return fetchPathsFromSomeExternalSource(); // returns a promise that will be resolved with something like ['src/main-layout.js', 'src/admin-layout.js']
  },
};

When combining with the output.library option: If an array is passed only the last item is exported.