Skip to content

Commit 85d31e0

Browse files
authored
Enhance documentation for output.chunkLoadingGlobal
Clarify the usage and importance of output.chunkLoadingGlobal in webpack configurations.
1 parent a6e02a7 commit 85d31e0

1 file changed

Lines changed: 17 additions & 7 deletions

File tree

src/content/configuration/output.mdx

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -213,24 +213,34 @@ export default {
213213
};
214214
```
215215

216-
## output.chunkLoadingGlobal
216+
### output.chunkLoadingGlobal
217217

218218
`string = 'webpackChunkwebpack'`
219219

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()`).
221221

222-
**webpack.config.js**
222+
In webpack 4, this was called `output.jsonpFunction`.
223223

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
225235
export default {
226-
// ...
227236
output: {
228-
// ...
229-
chunkLoadingGlobal: "myCustomFunc",
237+
chunkLoadingGlobal: 'myAppWebpackChunks',
230238
},
231239
};
232240
```
233241

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.
243+
234244
## output.chunkLoading
235245

236246
`false` `string: 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import' | <any string>`

0 commit comments

Comments
 (0)