Day 8 of #100DaysOfCode: The relationship between bundle, chunk, and modules for Webpack?
Tags: 100daysofcode, webpack, webdev, javascript
Published: 2020-05-02 04:00:49

## Introduction
We only have to attach the bundle to the page and Webpack can find  correct chunks.

I am curious about that How does Webpack connect to chunks and modules?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n2bv452lgvetimcmoi54.png)

##Overview
This picture is the overview to describe the relationship between bundle, chunk and modules.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ar6gui3wd2z2nx7aouz7.png)

##Code review
###Step 1. Bundle to chunks
**Entry functions**
* I traced entry bundles and the chunks. I found that entry bundle connects to other chunks by calling **__webpack_require__.e** with chunk ids.
```javascript
return {     
    loadMap: function loadMap() { 
      Promise.all(/*! AMD require */[__webpack_require__.e(16), __webpack_require__.e(25), __webpack_require__.e(2), __webpack_require__.e(6), __webpack_require__.e(7), __webpack_require__.e(8), __webpack_require__.e(13), __webpack_require__.e(21)]).then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(/*! map/MapStart */ "./Scripts/map/MapStart.js"), __webpack_require__(/*! map/mapDataHub */ "./Scripts/map/mapDataHub.js"), __webpack_require__(/*! react */ "./Scripts/react.js"), __webpack_require__(/*! react-dom */ "./Scripts/react-dom.js"), __webpack_require__(/*! map-config */ "./Scripts/mapConfig.js")]; (function (mapStart, data, React, ReactDom, mapConfig) { 
        mapStart.init('map-container'); 
      }).apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__);}).catch(__webpack_require__.oe); 
    }
}
```
**__webpack_require__.e**
* The bundle also records installed chunks inside. The entry bundle calls jsonpScriptSrc to get the chucks' path and use document.createElement('script').src to load chunks.
```javascript
__webpack_require__.e = function requireEnsure(chunkId) { 
/******/ 		var promises = []; 
/******/ 
/******/ 
/******/ 		// JSONP chunk loading for javascript 
/******/ 
/******/ 		var installedChunkData = installedChunks[chunkId]; 
/******/ 		if(installedChunkData !== 0) { // 0 means "already installed".

/******/ 			if(installedChunkData) { 
/******/ 				promises.push(installedChunkData[2]); 
/******/ 			} else { 
/******/ 				// setup Promise in chunk cache 
/******/ 				var promise = new Promise(function(resolve, reject) { 
/******/ 					installedChunkData = installedChunks[chunkId] = [resolve, reject]; 
/******/ 				}); 
/******/ 				promises.push(installedChunkData[2] = promise); 
/******/ 
/******/ 				// start chunk loading 
/******/ 				var script = document.createElement('script'); 
/******/ 				var onScriptComplete; 
/******/ 
/******/ 				script.charset = 'utf-8'; 
/******/ 				script.timeout = 120; 
/******/ 				if (__webpack_require__.nc) { 
/******/ 					script.setAttribute("nonce", __webpack_require__.nc); 
/******/ 				} 
/******/ 				script.src = jsonpScriptSrc(chunkId);
```
**jsonpScriptSrc**
```javascript
/******/ 	function jsonpScriptSrc(chunkId) {
/******/ 		return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "." + {"2":"3937f65f8f13512fa0f2","6":"118a6e8bb0b40c5d593b","7":"6c87ff5d71bd1773f3a1","8":"15625cd7e3c02c5a0940","13":"7fc697f682d133859fde","16":"e64250cb91826ef1497b","21":"827ac758d444a8a61feb","25":"78937d4d446499959095","38":"97863a867cf2f4c8c98a"}[chunkId] + ".js"
/******/ 	}
```
**__webpack_require__.p**
```javascript
// __webpack_public_path__ 
/******/ 	__webpack_require__.p = "/Scripts/bundle/";
```
###Step 2. chunks to modules
* The chunk calls __webpack_require__ to execute modules
```javascript
/******/ 	function __webpack_require__(moduleId) { 
/******/ 
/******/ 		// Check if module is in cache 
/******/ 		if(installedModules[moduleId]) { 
/******/ 			return installedModules[moduleId].exports; 
/******/ 		} 
/******/ 		// Create a new module (and put it into the cache) 
/******/ 		var module = installedModules[moduleId] = { 
/******/ 			i: moduleId, 
/******/ 			l: false, 
/******/ 			exports: {} 
/******/ 		}; 
/******/ 
/******/ 		// Execute the module function 
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
/******/ 
/******/ 		// Flag the module as loaded 
/******/ 		module.l = true; 
/******/ 
/******/ 		// Return the exports of the module 
/******/ 		return module.exports; 
/******/ 	}
```
## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman