Webpack Module Loading Introduction

Based on a brief introduction to the first Webpack, this paper briefly analyzes the Webpack function module loading mechanism. Let's take a look at the following code, which is also the Dest.js file after compiling the Webpack profile.

/ **
 * webpack startup function.
 *
 * @param {Array} modules
 * /
/ ****** / (function (modules) {// webpackBootstrap
/ ****** / // cache module
/ ****** / var installedModules = ();
/ ****** /
            / **
             * The webpack function loads the module, the core code, and the exports function of the corresponding module according to the module id
             *
             * @param {string} moduleId
             * /
/ ****** / function __webpack_require __ (moduleId) {
/ ****** /
/ ****** / // check if the module is loaded
/ ****** / if (installedModules [moduleId]) {
                    // if the exports function of this module has been loaded
/ ****** / return installedModules [moduleId] .exports;
/ ****** /}
/ ****** / // Module is not loaded, create a new module, and add the module to the cache
/ ****** / var module = installedModules [moduleId] = {
/ ****** / i: moduleId, // module id
/ ****** / l: false, // load, whether to load, default is false
/ ****** / exports: {} // module export function, default is empty object
/ ****** /};
/ ****** /
/ ****** / // Call the module function passed in the input parameter according to the module id, the key core code,
                // If there are unloaded dependent modules in this module, __webpack_require__ is called recursively
/ ****** / modules [moduleId] .call (module.exports, module, module.exports, __webpack_require__);
/ ****** /
/ ****** / // Mark this module as loaded
/ ****** / module.l = true;
/ ****** /
/ ****** / // Return module export function
/ ****** / return module.exports;
/ ****** /}
/ ****** /
/ ****** /
/ ****** / // Object that exposes module functions (__webpack_modules__)
/ ****** / __webpack_require __. m = modules;
/ ****** /
/ ****** / // Exposed cached module
/ ****** / __webpack_require __. c = installedModules;
/ ****** /
/ ****** / // identity function for calling harmony imports with the correct context
/ ****** / __webpack_require __. i = function (value) {return value;};
/ ****** /
/ ****** / // define getter function for harmony exports
/ ****** / __webpack_require __. d = function (exports, name, getter) {
/ ****** / if (! __ webpack_require __. o (exports, name)) {
/ ****** / Object.defineProperty (exports, name, {
/ ****** / configurable: false,
/ ****** / enumerable: true,
/ ****** / get: getter
/ ****** /});
/ ****** /}
/ ****** /};
/ ****** /
/ ****** / // getDefaultExport function for compatibility with non-harmony modules
/ ****** / __webpack_require __. n = function (module) {
/ ****** / var getter = module && module .__ esModule?
/ ****** / function getDefault () {return module ['default'];}:
/ ****** / function getModuleExports () {return module;};
/ ****** / __webpack_require __. d (getter, 'a', getter);
/ ****** / return getter;
/ ****** /};
/ ****** /
/ ****** / // Object.prototype.hasOwnProperty.call
/ ****** / __webpack_require __. o = function (object, property) {return Object.prototype.hasOwnProperty.call (object, property);};
/ ****** /
/ ****** / // __webpack_public_path__
/ ****** / __webpack_require __. p = "";
/ ****** /
/ ****** / // Load the entry module and return the exports function
/ ****** / return __webpack_require __ (__ webpack_require __. s = 2);
/ ****** /})
/ ************************************************* *********************** /
/ ****** / ([
/ * 0 * /
/ *** / (function (module, exports) {

/ **
 * Created by Administrator on 5/30/2017.
 * /
module.exports.say = function () {
    console.log ('foot say function')
}

/ *** /}),
/* 1 */
/ *** / (function (module, exports) {

/ **
 * Created by Administrator on 5/30/2017.
 * /
module.exports = function () {
    console.log ('head module')
}

/ *** /}),
/* 2 */
/ *** / (function (module, exports, __webpack_require__) {

/ **
 * Created by Administrator on 5/30/2017.
 * /
var head = __webpack_require __ (1)
var foot = __webpack_require __ (0)

head ();
foot.say ();

/ *** /})
/ ****** /]); 

This function looks very complex at first glance, especially when the project development code is loaded, it can actually be simplified into the following form:

(function (modules) {
    //webpack start function
    //webpack Load module functions etc...
}) ([function
    (module, exports) {
        //Dependent functions 1
    }), (function (module, exports) {
        //Dependent functions 2
    }), (module, exports, __webpack_require__) {
        //ingress function, App.js
    })
])

is essentially an immediate function, the incoming parameters for each wrapped dependent module, the last function is generally wrapped in a portal file, if the load of the module has a dependency on other modules, then into the conference to receive a webpack_require parameter, The exports function for obtaining a dependent module in a module function.
Now look back at the interface exposed function module.exports can be externally obtained is very good understanding:)