I had an impression that if a webpack chunk depends on other chunks then its dependencies are loaded before this chunk by the webpack runtime.
Take this example:
/*
* ATTENTION: An "eval-source-map" devtool has been used.
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
(self["webpackJsonp__app"] = self["webpackJsonp__app"] || []).push([["myChunk"],{
/*
*
* HERE GOES THE CHUNK CODE
*
*/
},
/******/ function(__webpack_require__) { // webpackRuntimeModules
/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
/******/ __webpack_require__.O(0, ["commons","fastdom","bi-common","tslib"], function() { return __webpack_exec__("node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=localhost&port=4200&pathname=%2Fws&logging=error"), __webpack_exec__("node_modules/webpack/hot/dev-server.js"), __webpack_exec__("./my-entry/index.ts"); });
/******/ var __webpack_exports__ = __webpack_require__.O();
/******/ }
]);
I thought that the function at the end is invoked before the chunk itself is executed, hence the "dependencies" (the chunks that are listed in this function) are loaded before the chunk.
I'm starting to question myself. When I analyzed stats.json produced by Webpack for this compilation I discovered that these "dependencies" are actually called "siblings". And the relation between siblings is "next-to" rather than "before" or "after".
I didn't find an explanation of "siblings" on the official Webpack website neither did I find anything through googling.
Questions:
- What is the "siblings" property and what relationship does it define between the chunks?
- How does the chunk loading work in Webpack?
Will a chunk wait for its dependencies/siblings to load before its code is executed?
