Entry#

• Type: string | string[] | Record<string, string | string[] | EntryDescription> | Function
• 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.

module.exports = {
  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:

module.exports = {
  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:

const path = require('path');

module.exports = {
  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.

module.exports = {
  entry: {
    page: ['./src/pre.js', './src/post.js'],
  },
};

Multiple modules will be executed sequentially according to the order defined by the array, so the code in pre.js will be executed before the code in post.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:

module.exports = {
  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.

module.exports = {
  entry: {
    foo: {
      import: './src/foo.js',
    },
  },
};

Multiple paths can be set in the import property:

module.exports = {
  entry: {
    foo: {
      import: ['./src/foo.js', './src/bar.js'],
    },
  },
};

EntryDescription.runtime#

• Type: false | string
• Default:undefined

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':

module.exports = {
  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

The baseURI of the resource referenced by this entry.

EntryDescription.filename#

• Type: string
• Default:undefined

The filename of the entry chunk.

EntryDescription.library#

• Type: string | string[] | object
• 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

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

EntryDescription.wasmLoading#

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

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#

• 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.

module.exports = {
  entry: {
    index: {
      import: './src/index.js',
      layer: 'layer-name',
    },
  },
  experiments: {
    layers: true,
  },
};

Dynamic entry#

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

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

module.exports = {
  //...
  entry: () => './demo',
};

Or:

module.exports = {
  //...
  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):

module.exports = {
  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.