Joney Li

本章节主要是用来做webpack源代码分析，Vue React 运用，自己写一个webpack,

如果点击图片看不起，请右键在新页面中打开

打包后的文件分析

打包前的模块分析

项目的结构入下图所示

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
 
module.exports = {
  devtool: 'none',
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: path.resolve('dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

打包后的结果

单文件的打包源码调试

这一块的内容我们需要借助流程图帮助我们梳理，再次之前我们需要学习一下如何在vscode中直接开启调试

Vscode，node环境下源码调试技巧

开始源码调试（模块调用）

多文件打包源码

先看看模块调用

多文件的模块相互调用方式和，单模块的调用方式实际上是一毛一样的，只不过是，在index.js 也就是大伯啊入口如果引入了其他模块，那么久会有一些变化

其它的都是一样的，只不过在index 把模块加载器require拿了进来，并且去调用了另一个模块，而另一个模块做的事情就是这样的代码

module.exports = "拉钩教育"

再看看其他辅助函数的作用

请查看注释

(function (modules) { // webpackBootstrap
  // The module cache
  // 定义对象用于缓存已加载过的模块
  var installedModules = {};
 
  // The require function
  // webpack 自定义的一个加载方法，核心功能就是返回被加载模块中导出的内容（具体内部是如何实现的，后续再分析）
  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__)
  // 将模块定义保存一份，通过 m 属性挂载到自定义的方法身上
  __webpack_require__.m = modules;
 
  // expose the module cache
  __webpack_require__.c = installedModules;
 
  // Object.prototype.hasOwnProperty.call
  // 判断被传入的对象 obj 身上是否具有指定的属性 **** ,如果有则返回 true 
  __webpack_require__.o = function (object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 
  // define getter function for harmony exports
  __webpack_require__.d = function (exports, name, getter) {
    // 如果当前 exports 身上不具备 name 属性，则条件成立
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };
 
  // define __esModule on exports
  __webpack_require__.r = function (exports) {
    // 下面的条件如果成立就说明是一个  esModule 
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      // Object.prototype.toString.call(exports)
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    // 如果条件不成立，我们也直接在 exports 对象的身上添加一个 __esModule 属性，它的值就是true 
    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
    /**
     * 01 接收二个参数，一个是 value 一般用于表示被加载的模块id ，第二个值 mode 是一个二进制的数值
     * 02 t 方法内部做的第一件事情就是调用自定义的 require 方法加载value 对应的模块导出，重新赋值给 value 
     * 03 当获取到了这个 value 值之后余下的 8 4 ns 2 都是对当前的内容进行加工处理，然后返回使用
     * 04 当mode & 8 成立是直接将 value 返回 （ commonJS ）
     * 05 当 mode & 4 成立时直接将 value 返回（esModule）
     * 06 如果上述条件都不成立，还是要继续处理 value ，定义一个  ns {} 
     *  6-1 如果拿到的 value 是一个可以直接使用的内容，例如是一个字符串，将它挂载到 ns 的 default 属性上
     *  6-2 
     */
  __webpack_require__.t = function (value, mode) {
    // 01 调用 t 方法之后，我们会拿到被加载模块中的内容 value 
    // 02 对于 value 来说我们可能会直接返回，也可能会处理之后再返回
    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;
  };
 
  // __webpack_public_path__
  __webpack_require__.p = "";
 
  // Load entry module and return exports
  return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
  /************************************************************************/
  ({
    "./src/index.js":
      /*! no static exports found */
      (function (module, exports, __webpack_require__) {
        let name = __webpack_require__(/*! ./login.js */ "./src/login.js")
        console.log('index.js内容执行了')
        console.log(name)
      }),
    "./src/login.js":
      /*! no static exports found */
      (function (module, exports) {
        module.exports = '拉勾教育'
      })
  });

Commonjs模块打包

上述的模块我们使用的都是commonjs的导入导出语法，在源文件src里，打包出来的辅助函数，没有使用到的场景，在esmModule这样的场景下，那些个辅助函数就有作用了，我们来看看

源码定义

我们把另一个文件换成esModeule写法

// 01 采用 cms 
// module.exports = '拉勾教育'
 
// 02 采用 esm 导出内容
export default 'zcegg'
export const age = 18

另一个文件还是使用commonjs的require

let obj = require('./login.js')
 
console.log('index.js内容执行了')
 
console.log(obj.default, '---->', obj.age)

源码分析

基础的内容和前面的导入流程是一样的，小的不同就是在加载esModule时候的调用函数

esModule模块打包

esM下使用cms

这里指的是，在index.js入口处，我们使用esM的import语法，在其他文件上我们使用cms模块导出语法,

他们打包的过程和源文件和辅助函数没有什么大的变化，知识辅助函数的调用变了一些。注意这个只是外出的函数调用，内部的.r和 .n 还去借调了其他方法，这点需要注意哈

esM下使用esM

这个时候它的导出就是这样的。调用的函数不一样而已 r（加一个esModule标记），d（加一个default 和对应属性的get获取器）

NB？手写一个打包器？或者功能函数怎么样？

这个地方主要是，想手写 /对照打包的构建结构，来梳理一下所有的辅助函数

(function (modules) {
  // 01 定义对象用于将来缓存被加载过的模块
  let installedModules = {}
 
  // 02 定义一个 __webpack_require__ 方法来替换 import require 加载操作
  function __webpack_require__(moduleId) {
    // 2-1 判断当前缓存中是否存在要被加载的模块内容，如果存在则直接返回
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports
    }
 
    // 2-2 如果当前缓存中不存在则需要我们自己定义{} 执行被导入的模块内容加载
    let module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    }
 
    // 2-3 调用当前 moduleId 对应的函数，然后完成内容的加载
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
 
    // 2-4 当上述的方法调用完成之后，我们就可以修改 l 的值用于表示当前模块内容已经加载完成了
    module.l = true
 
    // 2-5 加载工作完成之后，要将拿回来的内容返回至调用的位置 
    return module.exports
  }
 
  // 03 定义 m 属性用于保存 modules 
  __webpack_require__.m = modules
 
  // 04 定义 c 属性用于保存 cache 
  __webpack_require__.c = installedModules
 
  // 05 定义 o 方法用于判断对象的身上是否存在指定的属性
  __webpack_require__.o = function (object, property) {
    return Object.prototype.hasOwnProperty(object, property)
  }
 
  // 06 定义 d 方法用于在对象的身上添加指定的属性，同时给该属性提供一个 getter 
  __webpack_require__.d = function (exports, name, getter) {
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter })
    }
  }
 
  // 07 定义 r 方法用于标识当前模块是 es6 类型
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" })
    }
    Object.defineProperty(exports, '__esModule', { value: true })
  }
 
  // 08 定义 n 方法，用于设置具体的 getter 
  __webpack_require__.n = function (module) {
    let getter = module && module.__esModule ?
      function getDefault() { return module['default'] } :
      function getModuleExports() { return module }
 
    __webpack_require__.d(getter, 'a', getter)
 
    return getter
  }
 
  // 09 定义 P 属性，用于保存资源访问路径
  __webpack_require__.p = ""
 
  // 10 调用 __webpack_require__ 方法执行模块导入与加载操作
  return __webpack_require__(__webpack_require__.s = './src/index.js')
 
})
  ({
    "./src/index.js":
      (function (module, __webpack_exports__, __webpack_require__) {
 
        "use strict";
        __webpack_require__.r(__webpack_exports__);
        var _login_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./login.js */ "./src/login.js");
        console.log('index.js 执行了')
        console.log(_login_js__WEBPACK_IMPORTED_MODULE_0__["default"], '<------')
        console.log(_login_js__WEBPACK_IMPORTED_MODULE_0__["age"], '<------')
      }),
    "./src/login.js":
      (function (module, __webpack_exports__, __webpack_require__) {
        "use strict";
        __webpack_require__.r(__webpack_exports__);
        __webpack_require__.d(__webpack_exports__, "age", function () { return age; });
        __webpack_exports__["default"] = ('zce是一个帅哥');
        const age = 40
      })
 
  })

懒加载

对于懒加载来说，源代码build之后的代码会相对复制的多，我们先来看看整个流程在深入细节

流程

首先我们来看看，在src源码中如何使用懒加载

let oBtn = document.getElementById('btn')
 
oBtn.addEventListener('click', function () {
  import(/*webpackChunkName: "login"*/'./login.js').then((login) => {
    console.log(login)
  })
})
 
console.log('index.js执行了')

然后 我们看看打包之后的文件

(function (modules) { // webpackBootstrap
  // install a JSONP callback for chunk loading
  function webpackJsonpCallback(data) {
    var chunkIds = data[0];
    var moreModules = data[1];
    // add "moreModules" to the modules object,
    // then flag all "chunkIds" as loaded and fire callback
    var moduleId, chunkId, i = 0, resolves = [];
    for (; i < chunkIds.length; i++) {
      chunkId = chunkIds[i];
      if (Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
        resolves.push(installedChunks[chunkId][0]);
      }
      installedChunks[chunkId] = 0;
    }
    for (moduleId in moreModules) {
      if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
        modules[moduleId] = moreModules[moduleId];
      }
    }
    if (parentJsonpFunction) parentJsonpFunction(data);
 
    while (resolves.length) {
      resolves.shift()();
    }
 
  };
 
  // The module cache
  var installedModules = {};
 
  // object to store loaded and loading chunks
  // undefined = chunk not loaded, null = chunk preloaded/prefetched
  // Promise = chunk loading, 0 = chunk loaded
  var installedChunks = {
    "main": 0
  };
 
  // script path function
  function jsonpScriptSrc(chunkId) {
    return __webpack_require__.p + "" + chunkId + ".built.js"
  }
 
  // 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;
  }
 
  // This file contains only the entry chunk.
  // The chunk loading function for additional 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".
 
      // a Promise means "currently loading".
      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);
 
        // create error before stack unwound to get useful stacktrace later
        var error = new Error();
        onScriptComplete = function (event) {
          // avoid mem leaks in IE.
          script.onerror = script.onload = null;
          clearTimeout(timeout);
          var chunk = installedChunks[chunkId];
          if (chunk !== 0) {
            if (chunk) {
              var errorType = event && (event.type === 'load' ? 'missing' : event.type);
              var realSrc = event && event.target && event.target.src;
              error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
              error.name = 'ChunkLoadError';
              error.type = errorType;
              error.request = realSrc;
              chunk[1](error);
            }
            installedChunks[chunkId] = undefined;
          }
        };
        var timeout = setTimeout(function () {
          onScriptComplete({ type: 'timeout', target: script });
        }, 120000);
        script.onerror = script.onload = onScriptComplete;
        document.head.appendChild(script);
      }
    }
    return Promise.all(promises);
  };
 
  // 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 = "";
 
  // on error function for async loading
  __webpack_require__.oe = function (err) { console.error(err); throw err; };
 
  var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
  var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
  jsonpArray.push = webpackJsonpCallback;
  jsonpArray = jsonpArray.slice();
  for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
  var parentJsonpFunction = oldJsonpFunction;
 
 
  // Load entry module and return exports
  return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
  /************************************************************************/
  ({
    "./src/index.js":
      (function (module, exports, __webpack_require__) {
        let oBtn = document.getElementById('btn')
        oBtn.addEventListener('click', function () {
          __webpack_require__.e(/*! import() | login */ "login").then(__webpack_require__.t.bind(null, /*! ./login.js */ "./src/login.js", 7)).then((login) => {
            console.log(login)
          })
        })
        console.log('index.js执行了')
      })
  // 可以看到，在整个地方实际上就变了挺多的
  1. import() 可以实现指定模块的懒加载操作
  2. 当前懒加的核心原理是Jsonp
  3. t方法可以针对不同内容进行不同的出合理，（处理的方式取决于传入的参数 8 6 7 3 2 1 ）
  });

t方法的实现

t方法比较的重要，也比较难，是webpack中比较重要的一个工具函数

我们来看看，使用& 和二进制如何减少条件判断

let mode = 0b1001
 
// if (!(mode & 1)) {
//   console.log('第四位上的值不是1')
// }
 
if (mode & 1) {
  console.log('第四位上是1')
}
 
if (mode & 8) {
  console.log('第1位上是1')
}
 
 
// 二进制的安位与运算比较可以 同事判断几个“开关”
0001
1111
 
=> 0001  第四个位置的开关是开着的！

  __webpack_require__.t = function (value, mode) {
    /**
     * 01 接收二个参数，一个是 value 一般用于表示被加载的模块id ，第二个值 mode 是一个二进制的数值
     * 02 t 方法内部做的第一件事情就是调用自定义的 require 方法加载value 对应的模块导出，重新赋值给 value 
     * 03 当获取到了这个 value 值之后余下的 8 4 ns 2 都是对当前的内容进行加工处理，然后返回使用
     * 04 当mode & 8 成立是直接将 value 返回 （ commonJS ）
     * 05 当 mode & 4 成立时直接将 value 返回（esModule）
     * 06 如果上述条件都不成立，还是要继续处理 value ，定义一个  ns {} 
     *  6-1 如果拿到的 value 是一个可以直接使用的内容，例如是一个字符串，将它挂载到 ns 的 default 属性上
     *  6-2 
     */
    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;
  };

手写打包后的源码

(function (modules) {
  // 01 定义对象用于将来缓存被加载过的模块
  let installedModules = {}
 
  // 02 定义一个 __webpack_require__ 方法来替换 import require 加载操作
  function __webpack_require__(moduleId) {
    // 2-1 判断当前缓存中是否存在要被加载的模块内容，如果存在则直接返回
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports
    }
 
    // 2-2 如果当前缓存中不存在则需要我们自己定义{} 执行被导入的模块内容加载
    let module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    }
 
    // 2-3 调用当前 moduleId 对应的函数，然后完成内容的加载
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
 
    // 2-4 当上述的方法调用完成之后，我们就可以修改 l 的值用于表示当前模块内容已经加载完成了
    module.l = true
 
    // 2-5 加载工作完成之后，要将拿回来的内容返回至调用的位置 
    return module.exports
  }
 
  // 03 定义 m 属性用于保存 modules 
  __webpack_require__.m = modules
 
  // 04 定义 c 属性用于保存 cache 
  __webpack_require__.c = installedModules
 
  // 05 定义 o 方法用于判断对象的身上是否存在指定的属性
  __webpack_require__.o = function (object, property) {
    return Object.prototype.hasOwnProperty(object, property)
  }
 
  // 06 定义 d 方法用于在对象的身上添加指定的属性，同时给该属性提供一个 getter 
  __webpack_require__.d = function (exports, name, getter) {
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter })
    }
  }
 
  // 07 定义 r 方法用于标识当前模块是 es6 类型
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" })
    }
    Object.defineProperty(exports, '__esModule', { value: true })
  }
 
  // 08 定义 n 方法，用于设置具体的 getter 
  __webpack_require__.n = function (module) {
    let getter = module && module.__esModule ?
      function getDefault() { return module['default'] } :
      function getModuleExports() { return module }
 
    __webpack_require__.d(getter, 'a', getter)
 
    return getter
  }
 
  // 11 定义 t 方法，用于加载指定 value 的模块内容，之后对内容进行处理再返回
  __webpack_require__.t = function (value, mode) {
    // 01 加载 value 对应的模块内容（ value 一般就是模块 id ）
    // 加载之后的内容又重新赋值给 value 变量
    if (mode & 1) {
      value = __webpack_require__(value)
    }
 
    if (mode & 8) {  // 加载了可以直接返回使用的内容
      return value
    }
 
    if ((mode & 4) && typeof value === 'object' && value && value.__esModule) {
      return value
    }
 
    // 如果 8 和 4 都没有成立则需要自定义 ns 来通过 default 属性返回内容
    let 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
  }
 
  // 09 定义 P 属性，用于保存资源访问路径
  __webpack_require__.p = ""
 
  // 10 调用 __webpack_require__ 方法执行模块导入与加载操作
  return __webpack_require__(__webpack_require__.s = './src/index.js')
 
})
  ({
    "./src/index.js":
      (function (module, exports, __webpack_require__) {
        let name = __webpack_require__.t(/*! ./login.js */ "./src/login.js", 0b0111)
        console.log('index.js执行')
        console.log(name)
      }),
    "./src/login.js":
      (function (module, exports) {
        module.exports = '拉勾教育'
      })
  })