Webpack模块化实现&动态模块加载原理（8K+字长文！！收藏后阅读）

首发地址：https://mp.weixin.qq.com/s/_r...

标题党：为了更好的讲解，文中代码占较多字数，不用担心~

    通过本文你可以学到什么：webpack对模块化语法的支持、打包后模块的链接执行、动态加载模块的处理流程，以及可能涉及到的诸多知识点等待你的发掘。提示：有些讲解放到了注释里，注意结合一起看。

正文开始~

目前前端工程通过webpack的构建，支持ESModule和CommonJs的写法，达到前端模块化的需求。本文将对webpack的模块链接以及动态获取模块的实现方式做深入分析。并对涉及到的知识点，比如treeShaking、CommonJs实现、闭包应用都有提及，方便大家真正知道其实现原理，想吃快餐的童鞋可以选择性速读。

在接下来的例子中，将同时使用ESModule和CommonJs的语法导入导出，尽量全面的刨析webpack做的工作，代码如下：

//index.js  入口文件
import _, { name } from './es';
let co = require('./common');
co.sayHello(name);
export default _;

//es.js
export const age = 18;
export const name = "前端事务所";
export default "ESModule";

//common.js
exports.sayHello = (name, desc) => {
  console.log(`欢迎关注[前端事务所]~`);
}

为了更完整的展示webpack的处理细节，使用的webpack配置需要说明下：

• 由于mode:production默认开启了作用域提升，这里采用mode：development模式；
• 未使用压缩插件。
• output.filename：'js/[name].[hash].js' //默认name为main

打包后代码如下（略长，回顾梳理用，先别管，往下翻!：

//main.9993bb.js
(function(modules) { // webpackBootstrap
   // 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;
   };
   // 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 entry module and return exports
   return __webpack_require__(__webpack_require__.s = 0);
 })({
  "./src/index.js": 
 /*! exports provided: default */
 /*! all exports used */
 (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    __webpack_require__.r(__webpack_exports__);
    /* harmony import */ 
    var _es__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./es */ "./src/es.js");
    var co = __webpack_require__(/*! ./common */ "./src/common.js"); // import co from './common';
    co.sayHello(_es__WEBPACK_IMPORTED_MODULE_0__[/* name */ "b"]);
    /* harmony default export */ 
    __webpack_exports__["default"] = (_es__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
  }),
  "./src/es.js": 
  /*! exports provided: age, name, default */
  /*! exports used: default, name */
  (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    /* unused harmony export age */
    /* harmony export (binding) */ 
    __webpack_require__.d(__webpack_exports__, "b", function() { return name; });
    var age = 18;
    var name = "前端事务所";
    /* harmony default export */ 
    __webpack_exports__["a"] = ("ESModule");
  }),
  "./src/common.js":
  /*! no static exports found */
  /*! all exports used */
  (function(module, exports) {
    exports.sayHello = function (name, desc) {
      console.log("\u6B22\u8FCE\u5173\u6CE8[\u524D\u7AEF\u4E8B\u52A1\u6240]~");
    };
  }),
  0:
  (function(module, exports, __webpack_require__) {
    module.exports = __webpack_require__(/*!  */"./src/index.js");
  })
 });
 //# sourceMappingURL=main.6196cc781843c8696cda.js.map

貌似有点长，很多人可能会被劝退，那么精简后如下：

 (function(modules) { // webpackBootstrap
   //...
   // Load entry module and return exports
   return __webpack_require__(__webpack_require__.s = 36);
 })({
  "./src/index.js": 
  (function(module, __webpack_exports__, __webpack_require__) {/*模块内容*/}),
  "./src/es.js": 
  (function(module, __webpack_exports__, __webpack_require__) {/*模块内容*/}),
  "./src/common.js": 
  (function(module, exports) {/*模块内容*/})
});
//# sourceMappingURL=main.6196cc781843c8696cda.js.map

这样就好多了，从上面我们可以大致获取如下信息：

1）我们的模块被转换成了立即执行函数表达式(IIFE)，函数会自执行，进行模块的创建以及链接等；（runtime代码）

2）所有模块组装成对象作为函数的参数传入。对象的构成：{ [文件的路径]：[被包装后的模块内容] }；

3）每个模块都被构造的函数包裹。（模块代码的转换）

下面我们对上面代码做拆解，分别对"模块如何被封装"以及"怎么被链接起来"，做详细分析。

模块代码的转换

    由于webpack不仅支持ESM的import和export语法，同时支持CommonJs的require和exports的语法，接下来将分别进行分析。

首先看"ESM规范"的代码会被如何处理：

"./src/es.js": 
  /*! exports provided: age, name, default */
  /*! exports used: default, name */
  (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    /* unused harmony export age */
    /* harmony export (binding) */ 
    __webpack_require__.d(__webpack_exports__, "b", function() { return name; });
    var age = 18;
    var name = "前端事务所";
    /* harmony default export */ 
    __webpack_exports__["a"] = ("ESModule");
  })

从上到下分析：

1）每个函数上面会有一些注释：

//记录了当前模块被导出的接口有哪些
exports provided
//导出接口中被使用的有哪些
exports used

函数体内部同样有类似的注释：

// 未被使用的导出
unused harmony export age
// 被使用的导出，（type：使用类型)
harmony export (binding)

正是基于这些接口信息的记录，使得webapck可以实现treeShaking，具体细节参考Tree Shaking原理。

2）函数的参数分别为：module, __webpack_exports__, __webpack_require__

     Tips：有一点需要强调下，CommonJs中导出的是模块对象，ESM规范中模块是不存在模块对象的，因此可以使用this===undefined判断当前环境是否为模块内。但是webpack支持ESM语法是通过将其转换成类似CommonJs的加载形式，只不过模块的读取不是通过文件流从硬盘读取，而是从内存读取（CommonJs的简单实现可以参考模块化介绍）。

    这里module就是模块对象，而__webpack_exports__ === module.exports，这点和CommonJs一致，既然这样，只传一个module不就行了？CommonJs是支持module.exports和exports两种写法的，相同实现。

    Webpack使用__webpack_require__对import关键词的做了替换处理。

3）可以看到导出的age、name 被转换成变量声明，那怎么导出的呢？

可以看到有个__webpack_require__.d方法，看一下它做了什么事（看注释）：

// define getter function for harmony exports
__webpack_require__.d = function(exports, name, getter) {
  //判断该变量是否已经挂载到exports上
  if(!__webpack_require__.o(exports, name)) {
    //给exports添加导出变量（接口），可枚举，通过getter读取自定义的值
    Object.defineProperty(exports, name, { enumerable: true, get: getter });
  }
};

    哦，原来是将导出的变量绑定到exports上。由于age被标记为未使用，因此并不会被注册到exports上。而通过使用__webpack_require__.d将name绑定到exports，这里需要注意三点：

• 通过闭包传引用的方式（getter的实现）是为了实现ESM的规范：导出不是值的复制，而是共享的引用。使用时exports.name，会触发getter返回其当前值；
• 显式的为对象属性添加属性描述器{enumerable: true, get: getter}，由于set：undefined，严格模式（"use strict"）下，不能更改其值。
• 细心的童鞋会发现，__webpack_require__.d是被放到模块顶层首先被执行的，为什么呢？为了实现ESM的export的提升（变量|函数的区别，参见模块化中ES的循环依赖部分），注意和后面介绍的模块初始化时放入缓存一起理解。

    另外__webpack_exports__["a"] = ("ESModule");，这个a其实就是default，也是被挂载到module.exports上。和name接口导出定义的区别，在于default可以重新赋值，如:

import * as ES from './a.js'
ES.name = 1; //Uncaught TypeError: Cannot set property name of #