Day 8 of #100DaysOfCode: The relationship between bundle, chunk, and modules for Webpack?

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?

Overview

This picture is the overview to describe the relationship between bundle, chunk and modules.

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.

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.

__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

/******/    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

// __webpack_public_path__ 
/******/    __webpack_require__.p = "/Scripts/bundle/";

Step 2. chunks to modules

• The chunk calls webpack_require to execute modules

/******/    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