Skip to content

Commit dab5bea

Browse files
authored
docs(guides): add tip for multiple entries in output management (#7798)
1 parent c95c1a3 commit dab5bea

1 file changed

Lines changed: 6 additions & 0 deletions

File tree

src/content/guides/output-management.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ contributors:
1010
- AnayaDesign
1111
- chenxsan
1212
- snitin315
13+
- Brennvo
1314
---
1415

1516
T> This guide extends on code examples found in the [`Asset Management`](/guides/asset-management) guide.
@@ -133,6 +134,11 @@ We can see that webpack generates our `print.bundle.js` and `index.bundle.js` fi
133134

134135
But what would happen if we changed the name of one of our entry points, or even added a new one? The generated bundles would be renamed on a build, but our `index.html` file would still reference the old names. Let's fix that with the [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin).
135136

137+
T> If you inspected `print.bundle.js`, you might have noticed that it did not contain the `printMe` function. Instead, it contained only an [IIFE](/concepts/why-webpack/#iifes---immediately-invoked-function-expressions) with no observable side effects.<br /><br />
138+
This is because in our current setup, webpack treats each entry point as a standalone program that runs when the bundle is loaded. Because `print.js` only exports a function and never calls `printMe()`, executing it as its own entry does not require any executable runtime code. Thus, [webpack is able to omit that code as an optimization](/guides/tree-shaking/) since it would have no observable effect.<br /><br />
139+
In contrast, since `index.js` imports and uses `printMe`, webpack includes that function directly in `index.bundle.js`. Remember that webpack is a module _bundler_, so `index.bundle.js` contains all the code it needs to run rather than unresolved import statements.<br /><br />
140+
Multiple entry points are used here solely to demonstrate output management and the `HtmlWebpackPlugin`. In a real project, you would typically avoid creating a separate entry point for utility modules like this. If you do have multiple entry points that share dependencies, see [Prevent Duplication](/guides/code-splitting/#prevent-duplication) in the Code Splitting guide.
141+
136142
## Setting up HtmlWebpackPlugin
137143

138144
First install the plugin and adjust the `webpack.config.js` file:

0 commit comments

Comments
 (0)