#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(import.meta.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

• Type: string[] | string
• Default:'./src/index.js'

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

• Type: false | string
• Default:undefined

Sets the name of the Rspack runtime chunk. Setting runtime creates a separate chunk for this code. Set it to false to keep the code in the entry chunk.

For example, name the Rspack runtime chunk used by the main entry 'foo':

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

#EntryDescription.chunkLoading

• Type: false | string | 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import'
• Default:undefined

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

• Type: boolean
• Default:true

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

#EntryDescription.publicPath

• Type: 'auto' | string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
• Default:undefined

The publicPath of the resource referenced by this entry.

#EntryDescription.baseUri

• Type: string
• Default:undefined

Sets the initial base URI used to resolve relative asset and Worker URLs for this entry. If omitted, Rspack uses its default base URI. See Base URI for default values and usage examples.

#EntryDescription.filename

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

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

• Type: string[] | string
• Default:undefined

Declares the entries that the current entry depends on. Accepts an entry name or an array of entry names.

Use dependOn when multiple entries on the same page have an explicit dependency relationship, such as an editor and a preview that depend on a common application shell. Rspack will:

• Reuse modules from the dependency entries instead of including them again in the current entry chunk.
• Use the Rspack runtime from the dependency entries. These entries share a module cache, so shared modules are initialized only once.
• Wait until the required chunks are available before starting the current entry.

For example, make the editor and preview entries depend on shell:

export default {
  entry: {
    shell: './src/shell.js',
    editor: {
      import: './src/editor.js',
      dependOn: 'shell',
    },
    preview: {
      import: './src/preview.js',
      dependOn: 'shell',
    },
  },
};

export const documentState = { title: 'Untitled' };

console.log('Shell initialized');

import { documentState } from './shell.js';

documentState.title = 'Draft';

import { documentState } from './shell.js';

console.log(documentState.title);

The build produces shell.js, editor.js, and preview.js. The shell module is bundled only in shell.js, and all three entries use the same Rspack runtime and module cache. Assuming the output directory is served at /dist/, load the files in this order:

<script defer src="/dist/shell.js"></script>
<script defer src="/dist/editor.js"></script>
<script defer src="/dist/preview.js"></script>

The page logs Shell initialized once, followed by Draft: the preview reads the same object that the editor updated. Source code still needs to import the modules it uses; dependOn does not expose their exports as global variables.

dependOn controls chunk dependencies, but does not wait for asynchronous application initialization, such as a request started by shell. Coordinate that work explicitly in your application code. Entry dependencies must not form a cycle, and an entry with dependOn must not also specify runtime.

If you only need to extract shared modules automatically, prefer SplitChunksPlugin. It splits modules according to configurable rules without declaring dependencies between entries or unifying their Rspack runtime instances. If multiple entries on the same page also need to share module instances, combine it with optimization.runtimeChunk: 'single'. Use dependOn when you need explicit entry dependencies; it can also be combined with splitChunks.

#EntryDescription.wasmLoading

• Type: false | 'fetch' | 'async-node' | 'universal'
• Default:undefined

Option to set the method of loading WebAssembly Modules for this entry. When omitted, the value of output.wasmLoading is used.

The default value of output.wasmLoading 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

• Type: string | null | undefined
• Default:undefined

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 Module layers 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.

This page is adapted from webpack documentation under the CC BY 4.0, with modifications.