What is Entry — Webpack 5

How Entry Points work and how they are used in webpack.

Before continuing the article, please refer to the below link if you have missed the introduction to webpack 5

Introduction to Webpack 5

What is entry

Entry is a property that indicates webpack which module(s) / file(s) it should use to begin building out the internal dependency graph(s) of the project / application.

Three syntax of entry

1. Single entry
2. Multi-main entry
3. Object entry

Single entry

The single entry syntax points to one file path to start building the dependency graph of the project / application. It is a great choice when you are looking to quickly setup a webpack configuration for an application or tool with one entry point (i.e. a library)

Usage

entry: String

module.exports = {
  entry: "./src/index.js"
};

Multi-main entry

The multi-main entry syntax points to multiple file paths. Its creates separate dependency graphs based on these paths and finally get combined or merged into a single file.

Usage

entry: [String]

module.exports = {
  entry: [
   "./src/index_1.js",
   "./src/index_2.js"
  ]
};

Object entry

The object entry syntax creates separate files for each key value pair in the entry object. It allows you to customize the chunk / bundled file name (key name). This is the most scalable way of defining entry / entries in your application.

This is a popular technique used to separate concerns by environment, build target, and runtime.

Usage 1

entry: { [entryChunkName] : String }

Usage 2

entry: { [entryChunkName] : [String] }

module.exports = {
  entry: {
   adminApp: "./src/admin.js",
   homeApp: ["./src/home_1.js", "./src/home_2.js"]
  }
};

The webpack configuration file specifically to highlight entry property:

Note

You can pass an empty object to entry when you have only entry points generated by plugins (will see more about this in detail in the upcoming articles).

module.exports = {
  entry: {}
};

GitHub Repo Link

https://github.com/yadhus/What-is-Entry-Webpack-5

References

https://webpack.js.org/guides/entry-advanced/
https://webpack.js.org/concepts/#entry
https://webpack.js.org/api/
https://webpack.js.org/configuration/