浅谈webpack之模块打包原理

针对webpack的模块打包原理，我们还是以实际例子来讲解，例子如下所示：

 // 入口文件 main.js
 import addContent from "./add-content"

document.write("My first Webpack Demo!<br>")

addContent()

// add-content.js
export default function(){
    document.write("Hello world1")
}

上面例子很简单，就不做讲解了，那么打包之后的bundle.js如下：

(function (modules) {
  // The module cache
  var installedModules = {};
  // The require function
  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;
  }
  // expose the modules object (__webpack_modules__)
  __webpack_require__.m = modules;
  // expose the module cache
  __webpack_require__.c = installedModules;
  // define getter function for harmony exports
  __webpack_require__.d = function (exports, name, getter) {
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };
  // define __esModule on exports
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };
  // create a fake namespace object
  // mode & 1: value is a module id, require it
  // mode & 2: merge all properties of value into the ns
  // mode & 4: return value when already ns object
  // mode & 8|1: behave like require
  __webpack_require__.t = function (value, mode) {
		if (mode & 1) value = __webpack_require__(value);
		if (mode & 8) return value;
 		if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 		var ns = Object.create(null);
 		__webpack_require__.r(ns);
 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 		if (mode & 2 && typeof value != 'string') for (var key in value) __webpack_require__.d(ns, key, function (key) { return value[key]; }.bind(null, key));
		return ns;
  };

  __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 entry module and return exports
  return __webpack_require__(__webpack_require__.s = "./src/main.js");
})
  /************************************************************************/
  ({

 "./src/add-content.js":(function (module, __webpack_exports__, __webpack_require__) {
        "use strict";
        eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = (function(){\r\n    document.write(\"Hello world\")\r\n});\n\n//# sourceURL=webpack:///./src/add-content.js?");
	}),

 "./src/main.js":(function (module, __webpack_exports__, __webpack_require__) {
        "use strict";
        eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _add_content__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./add-content */ \"./src/add-content.js\");\n\r\n\r\ndocument.write(\"My first Webpack Demo!<br>\")\r\n\r\nObject(_add_content__WEBPACK_IMPORTED_MODULE_0__[\"default\"])()\n\n//# sourceURL=webpack:///./src/main.js?");
      })
  });

猛地一看，感觉很乱，不易读，大家可以把自己的bundle.js折叠起来看一下，就不难看出，bundle.js其实是一个自执行函数，这样做是为了构成自身的作用域~
ok，下面我们就把这个自执行函数展开讲下，首先，我会先重点介绍下里面几个对象的含义

• installedModules对象，每个模块只在第一次加载的时候执行，之后其导出的值就被存储到这个对象里面，当再次被记载的时候直接从这里取值，而不会重新执行。
• __webpack_require__函数，对模块加载的实现，在浏览器中可以通过调用__webpack_require__(moduleId)来完成模块的导入。
• modules对象，也就是自执行函数的参数，工程中所有产生依赖关系的模块都会以key-value的形式放在这里，key可以理解为一个模块的id，而这个id是这个模块的绝对路径，value则是一个匿名函数包裹的模块实体，匿名函数接受三个参数，分别是module（里面存储着导出功能，模块的id，是否加载过的标识）, __ webpack_exports __(导出)， __ webpack_require __（导入）。

接下来，我们看下他的具体流程

• 匿名函数中会初始化浏览器执行环境，包括定义 installedModules对象,__webpack_require__函数等，为模块加载和执行做一些准备工作
• 加载入口模块，每个bundle有且只有一个入口模块，在上面的示例中，main.js就是入口文件，在bundle中是__webpack_require__(__webpack_require__.s = "./src/main.js")这段代码，会从它先执行。
• 执行模块代码，执行执行到import，准确的说__webpack_require__，则暂时交出执行权，进入__webpack_require__函数进行加载其他模块代码，如果遇到export，则记录下模块的导出值。
• 在__webpack_require__中会判断即将加载的模块是否存在installedModules中，如果存在直接取值，如果不存在，则执行上一步骤。
• 所有依赖模块执行完毕后，最终执行权又回到入口模块，当入口模块的代码执行到结尾，也就意味着整个bundle运行结束。

可以看出，第三步和第四步是个递归的过程，Webpack为每个模块创造了一个可以导出和导入模块的环境，但本质上并没有修改代码的执行逻辑，因此代码执行的顺序与模块加载的顺序是完全一致的~