What is Entry — Webpack 5

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

https://dev.to/yadhus/introduction-to-webpack-5-5fhm

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

entry: { [entryChunkName] : String }

Usage

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:

	const path = require("path");
	module.exports = {
	mode: "production",
	entry: "./src/index.js", // Single entry syntax
	// entry: ["./src/index.js", "./src/vendor.js"], // Multi-main entry syntax
	// entry: {
	// // Object entry syntax
	// app: "./src/index.js",
	// vendor: "./src/vendor.js",
	// },
	output: {
	filename: "[name].js",
	path: path.resolve(__dirname, "dist"),
	},
	};

view raw webpack.config.entry.js hosted with ❤ by GitHub

Note

You can pass 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

Next article

https://dev.to/yadhus/what-is-output-webpack-5-cho

References

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