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/configuration/output.mdx
+17-7Lines changed: 17 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -213,24 +213,34 @@ export default {
213
213
};
214
214
```
215
215
216
-
## output.chunkLoadingGlobal
216
+
###output.chunkLoadingGlobal
217
217
218
218
`string = 'webpackChunkwebpack'`
219
219
220
-
The global variable is used by webpack for loading chunks.
220
+
The global variable used by webpack for loading chunks asynchronously (e.g. via code splitting and dynamic `import()`).
221
221
222
-
**webpack.config.js**
222
+
In webpack 4, this was called `output.jsonpFunction`.
223
223
224
-
```javascript
224
+
**Why does this matter?**
225
+
226
+
When multiple independent webpack builds are loaded on the same page, they all default to the same global variable name. This causes conflicts and can produce errors like:
227
+
```
228
+
TypeError: webpack_modules[moduleId] is not a function
229
+
```
230
+
231
+
To avoid this, assign a unique `chunkLoadingGlobal` to each build:
232
+
233
+
**webpack.config.js**
234
+
```js
225
235
exportdefault {
226
-
// ...
227
236
output: {
228
-
// ...
229
-
chunkLoadingGlobal:"myCustomFunc",
237
+
chunkLoadingGlobal:'myAppWebpackChunks',
230
238
},
231
239
};
232
240
```
233
241
242
+
T> If you have multiple entry points within a **single** webpack config, they already share the same runtime — no conflict will occur. You only need a unique `chunkLoadingGlobal` when running completely **separate** webpack instances on the same page.
0 commit comments