Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update EntryPoint #5826

Merged
merged 2 commits into from
Jan 5, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions src/content/concepts/entry-points.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ contributors:
- chenxsan
- adyjs
- anshumanv
- ritikbanger
---

As mentioned in [Getting Started](/guides/getting-started/#using-a-configuration), 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.
Expand Down Expand Up @@ -52,7 +53,7 @@ module.exports = {
};
```

Single Entry Syntax 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). However, there is not much flexibility in extending or scaling your configuration with this syntax.
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

Expand All @@ -77,15 +78,15 @@ T> You can pass empty object `{}` to `entry` when you have only entry points gen

### EntryDescription object

An object with entry point description. You can specify the following properties.
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](/configuration/output/#outputlibrary) 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.

- `publicPath`: Specify a public URL address for the output files of this entry when they are referenced in a browser. Also see [output.publicPath](/configuration/output/#outputpublicpath).
- `publicPath`: Specify a public URL address for the output files of this entry when they are referenced in a browser. Also, see [output.publicPath](/configuration/output/#outputpublicpath).

**webpack.config.js**

Expand Down Expand Up @@ -188,11 +189,11 @@ module.exports = {

**What does this do?** We are telling webpack that we would like 2 separate entry points (like the above example).

**Why?** With this you can import required libraries or files that aren't modified (e.g. Bootstrap, jQuery, images, etc) inside `vendor.js` and they will be bundled together into their own chunk. Content hash remains the same, which allows the browser to cache them separately thereby reducing load time.
**Why?** With this, you can import required libraries or files that aren't modified (e.g. Bootstrap, jQuery, images, etc) inside `vendor.js` and they will be bundled together into their own chunk. Content hash remains the same, which allows the browser to cache them separately thereby reducing load time.

T> In webpack version < 4 it was common to add vendors as a separate entry point to compile it as a separate file (in combination with the `CommonsChunkPlugin`). <br /><br /> This is discouraged in webpack 4. Instead, the [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks) option takes care of separating vendors and app modules and creating a separate file. **Do not** create an entry for vendors or other stuff that is not the starting point of execution.

### Multi Page Application
### Multi-Page Application

**webpack.config.js**

Expand Down