Entry Points

As mentioned in Getting Started, there are multiple ways to define the entry property in your webpack configuration. We will show you the ways you can configure the entry property, in addition to explaining why it may be useful to you.

In simple terms, an entry point tells webpack where to start building its internal dependency graph. Starting from this file, webpack recursively follows all imported modules and assets to determine what should be included in the final bundle.

The result of this process is later written to disk according to the output configuration, which controls where and how the bundled files are emitted.

Single Entry (Shorthand) Syntax

Usage: entry: string | string[]

• string: a single entry file
• string[]: multiple entry files

webpack.config.js

export default {
  entry: "./path/to/my/entry/file.js",
};

The single entry syntax for the entry property is a shorthand for:

webpack.config.js

export default {
  entry: {
    main: "./path/to/my/entry/file.js",
  },
};

We can also pass an array of file paths to the entry property which creates what is known as a "multi-main entry". This is useful when you would like to inject multiple dependent files together and graph their dependencies into one "chunk".

webpack.config.js

export default {
  entry: ["./src/file_1.js", "./src/file_2.js"],
};

When an array is provided for an entry point, webpack still creates a single entry chunk. All modules in the array are loaded in the given order and combined into the same dependency graph.

This pattern is commonly used to inject additional code before the main application entry, such as polyfills or development-only tools, without manually importing them in the application source.

Example: Injecting a polyfill

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

Single Entry Syntax is a great choice when you are looking to quickly set up a webpack configuration for an application or tool with one entry point (i.e. a library). However, there is not much flexibility in extending or scaling your configuration with this syntax.

Object Syntax

Usage: entry: Record<entryChunkName, string | string[]>

• entryChunkName: name of the entry chunk
• string: single entry file
• string[]: multiple entry files
• {}: an empty object is also accepted

webpack.config.js

export default {
  entry: {
    app: "./src/app.js",
    adminApp: "./src/adminApp.js",
  },
};

The object syntax is more verbose. However, this is the most scalable way of defining entry/entries in your application.

EntryDescription object

An object of entry point description. You can specify the following properties.

• dependOn: The entry points that the current entry point depends on. They must be loaded before this entry point is loaded.

• filename: Specifies the name of each output file on disk.

• import: Module(s) that are loaded upon startup.

• library: Specify library options to bundle a library from current entry.

• runtime: The name of the runtime chunk. When set, a new runtime chunk will be created. It can be set to false to avoid a new runtime chunk since webpack 5.43.0.