Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Hello, I’m Shanyue.

This is my front end engineering knowledge card collection 3/36 published in Denver

The WebPack Runtime, the code that WebPack eventually generates, does three things:

  1. __webpack_modules__Maintains an array of all modules. The entry module is parsed into an AST, all modules are searched first based on the DEPTH of the AST, and this module array is constructed. Each module has a wrapping function(module, module.exports, __webpack_require__)Package the module.
  2. __webpack_require__(moduleId): Manually implements loading a module. The loaded modules are cached, and the modules loaded by stomach are located by id__webpack_modules__Executes and returns the wrapped function inmodule.exportsAnd the cache
  3. __webpack_require__(0): Runs the first module, the entry module

In addition, when multiple chunks are packaged, such as code spliting, the webpack contains the runtime code for JSONP to load chunks.

The following is the simplest code for WebPack Runtime. See Node-examples for configuration examples

/ * * * * * * / var __webpack_modules__ = ([
/* 0 */./ * 1 * /
/ * * * / ((module) = > {

module.exports = (. args) = > args.reduce((x, y) = > x + y, 0)

/ * * * / })
/ * * * * * * / ]);
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * / // The module cache
/ * * * * * * / var __webpack_module_cache__ = {};
/ * * * * * * / 
/ * * * * * * / // The require function
/ * * * * * * / function __webpack_require__(moduleId) {
/ * * * * * * / 	// Check if module is in cache
/ * * * * * * / 	var cachedModule = __webpack_module_cache__[moduleId];
/ * * * * * * / 	if(cachedModule ! = =undefined) {
/ * * * * * * / 		return cachedModule.exports;
/ * * * * * * / 	}
/ * * * * * * / 	// Create a new module (and put it into the cache)
/ * * * * * * / 	var module = __webpack_module_cache__[moduleId] = {
/ * * * * * * / 		// no module.id needed
/ * * * * * * / 		// no module.loaded needed
/ * * * * * * / 		exports: {}
/ * * * * * * / 	};
/ * * * * * * / 
/ * * * * * * / 	// Execute the module function
/ * * * * * * / 	__webpack_modules__[moduleId](module.module.exports, __webpack_require__);
/ * * * * * * / 
/ * * * * * * / 	// Return the exports of the module
/ * * * * * * / 	return module.exports;
/ * * * * * * / }
/ * * * * * * / 
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() = > {
const sum = __webpack_require__(1)

sum(3.8)

})();
Copy the code

To further simplify the WebPack Runtime, the code is shown below

const __webpack_modules__ = [() = > {}]
const __webpack_require = id= > {
  const module = { exports: {}}const m = __webpack_modules__[id](module)
  return module.exports
}

__webpack_require__(0)
Copy the code