Webpack打包的代碼，允許我們使用各種各樣的模塊化，但是最常用的是CommonJS、ES Module。
需要的文件目錄如下：

image.png

const dateFormat = (date) => {
  return "2020-12-12";
}
const priceFormat = (price) => {
  return "100.00";
}
module.exports = {
  dateFormat,
  priceFormat
}

math.js

export const sum = (num1, num2) => {
  return num1 + num2;
}
export const mul = (num1, num2) => {
  return num1 * num2;
}

common_index.js

const { dateFormat, priceFormat } = require('./js/format');

console.log(dateFormat("abc"));
console.log(priceFormat("abc"));

es_index.js

import { sum, mul } from "./js/math";

console.log(mul(20, 30));
console.log(sum(20, 30));

index.js

// es module導(dǎo)出內(nèi)容, CommonJS導(dǎo)入內(nèi)容
const { sum, mul } = require("./js/math");

// CommonJS導(dǎo)出內(nèi)容, es module導(dǎo)入內(nèi)容
import { dateFormat, priceFormat } from "./js/format";

console.log(sum(20, 30));
console.log(mul(20, 30));

console.log(dateFormat("aaa"));
console.log(priceFormat("bbb"));

console.log(abc);

4.1 CommonJS模塊化實(shí)現(xiàn)原理

// 定義了一個(gè)對(duì)象
// 模塊的路徑(key): 函數(shù)(value)
var __webpack_modules__ = {
  "./src/js/format.js":
    (function (module) {
      const dateFormat = (date) => {
        return "2020-12-12";
      }
      const priceFormat = (price) => {
        return "100.00";
      }

      // 將我們要導(dǎo)出的變量, 放入到module對(duì)象中的exports對(duì)象
      module.exports = {
        dateFormat,
        priceFormat
      }
    })
}

// 定義一個(gè)對(duì)象, 作為加載模塊的緩存
var __webpack_module_cache__ = {};

// 是一個(gè)函數(shù), 當(dāng)我們加載一個(gè)模塊時(shí), 都會(huì)通過(guò)這個(gè)函數(shù)來(lái)加載
function __webpack_require__(moduleId) {
  // 1.判斷緩存中是否已經(jīng)加載過(guò)
  if (__webpack_module_cache__[moduleId]) {
    return __webpack_module_cache__[moduleId].exports;
  }

  // 2.給module變量和__webpack_module_cache__[moduleId]賦值了同一個(gè)對(duì)象
  var module = __webpack_module_cache__[moduleId] = { exports: {} };

  // 3.加載執(zhí)行模塊
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

  // 4.導(dǎo)出module.exports {dateFormat: function, priceForamt: function}
  return module.exports;
}


// 具體開(kāi)始執(zhí)行代碼邏輯
!function () {
  // 1.加載./src/js/format.js
  const { dateFormat, priceFormat } = __webpack_require__("./src/js/format.js");
  console.log(dateFormat("abc"));
  console.log(priceFormat("abc"));
}();

4.2 ES Module實(shí)現(xiàn)原理

// 1.定義了一個(gè)對(duì)象, 對(duì)象里面放的是我們的模塊映射
var __webpack_modules__ = {
  "./src/es_index.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
      // 調(diào)用r的目的是記錄時(shí)一個(gè)__esModule -> true
      __webpack_require__.r(__webpack_exports__);

      // _js_math__WEBPACK_IMPORTED_MODULE_0__ == exports
      var _js_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/math.js");

      console.log(_js_math__WEBPACK_IMPORTED_MODULE_0__.mul(20, 30));
      console.log(_js_math__WEBPACK_IMPORTED_MODULE_0__.sum(20, 30));
    }),
  "./src/js/math.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
      __webpack_require__.r(__webpack_exports__);

      // 調(diào)用了d函數(shù): 給exports設(shè)置了一個(gè)代理definition
      // exports對(duì)象中本身是沒(méi)有對(duì)應(yīng)的函數(shù)
      __webpack_require__.d(__webpack_exports__, {
        "sum": function () { return sum; },
        "mul": function () { return mul; }
      });

      const sum = (num1, num2) => {
        return num1 + num2;
      }
      const mul = (num1, num2) => {
        return num1 * num2;
      }
    })
};

// 2.模塊的緩存
var __webpack_module_cache__ = {};

// 3.require函數(shù)的實(shí)現(xiàn)(加載模塊)
function __webpack_require__(moduleId) {
  if (__webpack_module_cache__[moduleId]) {
    return __webpack_module_cache__[moduleId].exports;
  }
  var module = __webpack_module_cache__[moduleId] = {
    exports: {}
  };
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  return module.exports;
}

!function () {
  // __webpack_require__這個(gè)函數(shù)對(duì)象添加了一個(gè)屬性: d -> 值function
  __webpack_require__.d = function (exports, definition) {
    for (var key in definition) {
      if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
        Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
      }
    }
  };
}();


!function () {
  // __webpack_require__這個(gè)函數(shù)對(duì)象添加了一個(gè)屬性: o -> 值function
  __webpack_require__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
}();

!function () {
  // __webpack_require__這個(gè)函數(shù)對(duì)象添加了一個(gè)屬性: r -> 值function
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };
}();
__webpack_require__("./src/es_index.js");

4.3 CommonJS和ESModule相互導(dǎo)入

var __webpack_modules__ = ({
  "./src/index.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
      "use strict";
      __webpack_require__.r(__webpack_exports__);
      var _js_format__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/format.js");
      var _js_format__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_js_format__WEBPACK_IMPORTED_MODULE_0__);
      
      // es module導(dǎo)出內(nèi)容, CommonJS導(dǎo)入內(nèi)容
      const math = __webpack_require__("./src/js/math.js");

      // CommonJS導(dǎo)出內(nèi)容, es module導(dǎo)入內(nèi)容
      console.log(math.sum(20, 30));
      console.log(math.mul(20, 30));
      console.log(_js_format__WEBPACK_IMPORTED_MODULE_0___default().dateFormat("aaa"));
      console.log(_js_format__WEBPACK_IMPORTED_MODULE_0___default().priceFormat("bbb"));
    }),
  "./src/js/format.js":
    (function (module) {
      const dateFormat = (date) => {
        return "2020-12-12";
      }
      const priceFormat = (price) => {
        return "100.00";
      }
      module.exports = {
        dateFormat,
        priceFormat
      }
    }),

  "./src/js/math.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
      
      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {
        "sum": function () { return sum; },
        "mul": function () { return mul; }
      });
      const sum = (num1, num2) => {
        return num1 + num2;
      }

      const mul = (num1, num2) => {
        return num1 * num2;
      }
    })
});

var __webpack_module_cache__ = {};

// The require function
function __webpack_require__(moduleId) {
  // Check if module is in cache
  if (__webpack_module_cache__[moduleId]) {
    return __webpack_module_cache__[moduleId].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;
}

!function () {
  // getDefaultExport function for compatibility with non-harmony modules
  __webpack_require__.n = function (module) {
    var getter = module && module.__esModule ?
      function () { return module['default']; } :
      function () { return module; };
    __webpack_require__.d(getter, { a: getter });
    return getter;
  };
}();

/* webpack/runtime/define property getters */
!function () {
  // define getter functions for harmony exports
  __webpack_require__.d = function (exports, definition) {
    for (var key in definition) {
      if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
        Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
      }
    }
  };
}();

/* webpack/runtime/hasOwnProperty shorthand */
!function () {
  __webpack_require__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
}();

/* webpack/runtime/make namespace object */
!function () {
  // 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 });
  };
}();

__webpack_require__("./src/index.js");