You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/concepts/entry-points.mdx
+6-5
Original file line number
Diff line number
Diff line change
@@ -11,6 +11,7 @@ contributors:
11
11
- chenxsan
12
12
- adyjs
13
13
- anshumanv
14
+
- ritikbanger
14
15
---
15
16
16
17
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.
@@ -52,7 +53,7 @@ module.exports = {
52
53
};
53
54
```
54
55
55
-
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.
56
+
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.
56
57
57
58
## Object Syntax
58
59
@@ -77,15 +78,15 @@ T> You can pass empty object `{}` to `entry` when you have only entry points gen
77
78
78
79
### EntryDescription object
79
80
80
-
An object with entry point description. You can specify the following properties.
81
+
An object with an entry point description. You can specify the following properties.
81
82
82
83
-`dependOn`: The entry points that the current entry point depends on. They must be loaded before this entry point is loaded.
83
84
-`filename`: Specifies the name of each output file on disk.
84
85
-`import`: Module(s) that are loaded upon startup.
85
86
-`library`: Specify [library options](/configuration/output/#outputlibrary) to bundle a library from current entry.
86
87
-`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.
87
88
88
-
-`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).
89
+
-`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).
89
90
90
91
**webpack.config.js**
91
92
@@ -188,11 +189,11 @@ module.exports = {
188
189
189
190
**What does this do?** We are telling webpack that we would like 2 separate entry points (like the above example).
190
191
191
-
**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.
192
+
**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.
192
193
193
194
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.
0 commit comments