一.源代码

通过WebPack进行打包之后的代码。

// 模块的路径(key): 函数(value)
var __webpack_modules__ = {
  "./src/js/format.js":
    (function (module) {
      const dateFormat = (date) => {
        return "2020-12-12";
      }
      const priceFormat = (price) => {
        return "100.00";
      }

      // 将我们要导出的变量, 放入到module对象中的exports对象
      module.exports = {
        dateFormat,
        priceFormat
      }
    })
}

// 定义一个对象, 作为加载模块的缓存
var __webpack_module_cache__ = {};

// 是一个函数, 当我们加载一个模块时, 都会通过这个函数来加载
function __webpack_require__(moduleId) {
  // 1.判断缓存中是否已经加载过
  if (__webpack_module_cache__[moduleId]) {
    return __webpack_module_cache__[moduleId].exports;
  }

  // 2.给module变量和__webpack_module_cache__[moduleId]赋值了同一个对象
  var module = __webpack_module_cache__[moduleId] = { exports: {} };

  // 3.加载执行模块
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

  // 4.导出module.exports {dateFormat: function, priceForamt: function}
  return module.exports;
}


// 具体开始执行代码逻辑
!function () {
  // 1.加载./src/js/format.js
  const { dateFormat, priceFormat } = __webpack_require__("./src/js/format.js");
  console.log(dateFormat("abc"));
  console.log(priceFormat("abc"));
}();

webpack.config.js

注意: module.exports = {
      mode: "development",
      entry: "./src/index.js",
      devtool: "source-map",
}

二.解析

__webpack_modules__是一个对象，key就是字符串路径，value就是function函数

注意: !function() {
}()  这样的写法是一个立即执行函数 

//也可以有这两种写法
1. (function() {
} ())
2. (function() {
}) ()

执行__webpack_require__("./src/js/format.js")函数,首先会判断缓存里面是否加载过,第一次没有加
载。这里的moduleId就是传入的参数,即字符串路径。执行(2.),给缓存里面加入了moduleId。

缓存(__webpack_module_cache__[moduleId])

(3.)加载执行模块函数__webpack_modules__,moduleId就是key(路径字符串),这样拿到的就是对象里
的函数,并且执行函数,传入参数module,这里第二,第三个参数暂时没有用到。

函数里面执行module.exports,就是(2.),这样做了之后就可以执行(4.),因为里面也有了module.exports
的对象。(4.)导出moudle.exports({dateFormat: function, priceForamt: function}),所以再具体执
行代码逻辑的时候这就是__webpack_require__函数的返回值。 
解构对象，执行函数。

注: 带括号(2.)这种写法是源代码里面的注释过程标号。
dataFormat,priceFormat只是打包之后的函数,无特殊意义。
参考资料:codeyWhy老师

WebPack CommonJS实现原理

一.源代码

二.解析