[JavaScript知识库]webpack5内部是如何处理模块化的？

前言

今天给大家带来一期webpack5处理模块化的文章,我们将从webpack如何处理 ESModule 和 CommonJS,以及它们两者之间的互相引用从打包后的源代码作为分析。
我们都知道，在浏览器中直接使用CommonJS是不成功的，使用 ESModule 需要加type=module才能成功，但是经过webpack打包后，我们可以随心所欲的使用我们的模块化文件，甚至我们还可以将CommonJS导出的用ESModule导入，ESModule导出的用CommonJS导入，这很难不让我们不产生疑问，它到底是怎样做到的呢？
让我们带着疑问去了解真正的实现过程。

准备工作

这里还是简单介绍下打包配置，这是最基础的配置了，有一定基础的就能看懂。

webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "development", // 配置开发模式
    devtool: "source-map",// 配置源映射
    entry: "./src/dev.js", //配置入口地址
    output: {
        filename: "js/dist.js", // 配置出口文件名
        // 配置出口地址 必须是一个绝对路径
        path: path.resolve(__dirname, "./dist")
    },
    module: {
        rules: []
    },
    plugins: [
        new CleanWebpackPlugin(),// 自动清除打包前的包的插件
        new HtmlWebpackPlugin({ // 根据指定模板生成index.html 以及传入ejs接收的变量
            title: "kzj webpack", // 传入与模板对应的值
        })
    ]
}

CommonJS解析

dev.js

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

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

js/format.js

const dateFormat = (date) => {
  return "2020-12-12";
}

const priceFormat = (price) => {
  return "100.00";
}

console.log(cba);

module.exports = {
  dateFormat,
  priceFormat
}

现在我们要做的事情就是将上面的代码通过webpack5打包，然后看看它打包的源代码是怎样的。

dist.js

注:以下代码经过了我对它格式化处理，删除了不必要的注释和最外层的立即执行函数，本质上该文件会被初始化调用一次！

// 定义了一个对象
// 模块的路径(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"));
}();

解析:
1.对象__webpack_modules__ 模块映射 将路径与代码连接起来
2.对象__webpack_module_cache__ 缓存已经处理过的模块
3.方法__webpack_require__ 加载模块
上面的代码我都进行了注释，基本上能看懂，现在带大家走一遍它的流程。
首先，是执行最下面的立即执行函数(!function(){}()也是立即执行函数的一种写法)，通过调用__webpack_require__这个方法传入文件路径，它就会来到__webpack_require__这里。
方法__webpack_require__首先会在缓存中查找是否有缓存，有则直接返回对应的exports对象，没有就创建一个总对象对象中的属性exports指向空对象（{ exports: {} }），并加入缓存。然后查找到我们最上面__webpack_modules__对象，这个对象显而易见是存储我们路径与对应代码的一种映射。我们通过传入路径就能拿到文件对应的函数，接下来就是执行这个函数，将我们刚创建的{ exports: {} } = module 对象传入，该函数将会调用module.exports = …为改变其exports内存指向，让它从空对象指向现在创建的对象。 module.exports = { dateFormat, priceFormat }
这样，缓存里的exports指向也会相应改变成我们真正需要的值了， 下一次取值就可以直接去缓存里面取了。
最后返回我们的exports对象，再通过解构即可拿到我们需要的值了。
给大家简单总结下，其实，这里做的事情，本质上就是先让总对象({ exports: {} })里的exports指向一个空对象，然后将总对象传入到对应路径的函数中，函数里面通过改变总对象里的exports的指向来同步改变缓存exports的指向，因为它们都是引用的总对象里面的exports。

ESModule解析

es_index.js 入口文件

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

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

js/math.js

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

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

dist.js 解析后的源代码

// 1.定义了一个对象, 对象里面放的是我们的模块映射
var __webpack_modules__ = {
  "./src/es_index.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
      // 调用r的目的是记录时一个__esModule -> true
      __webpack_require__.r(__webpack_exports__);

      // _js_math__WEBPACK_IMPORTED_MODULE_0__ == exports 返回的就是exports对象
      var _js_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/math.js");
      // 取值时通过代理拿到 definition对应key的值
      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__);

      // 调用了d函数: 给exports设置了一个代理definition
      // exports对象中本身是没有对应的函数
      __webpack_require__.d(__webpack_exports__, {
        "sum": function () { return sum; }, // 这样返回便于衔接与后面代理的get默认返回一个函数
        "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函数的实现(加载模块)
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__这个函数对象添加了一个属性: d -> 值function
  __webpack_require__.d = function (exports, definition) {
    for (var key in definition) {
      // 此处的判断是 key存在于definition对象上 但是 exports是没有此key属性的
      if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
        // 在exports对象设置对应属性 但是取值是做了一个代理 通过definition取值
        // 取值会执行get函数 和上面的 definition对象设置的相呼应
        Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
      }
    }
  };
}();


!function () {
  // __webpack_require__这个函数对象添加了一个属性: o -> 值function
  // 判断该对象上是否存在该属性
  __webpack_require__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
}();

!function () {
  // __webpack_require__这个函数对象添加了一个属性: 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");

解析:
1.对象__webpack_modules__ 模块映射 将路径与代码连接起来
2.对象__webpack_module_cache__ 缓存已经处理过的模块
3.方法__webpack_require__ 加载模块
4.第一个立即执行函数为__webpack_require__增加了一个d方法此方法作用是做了一层代理
5.第二个立即执行函数为__webpack_require__增加了一个o方法此方法作用是判断对象是否有某属性
6.第三个立即执行函数为__webpack_require__增加了一个r方法此方法作用是判断是否是ESModule加载，并为其增加标识
开始执行，执行最下面的__webpack_require__(“./src/es_index.js”)，然后里面又引入了__webpack_require__(“./src/js/math.js”)，解析此模块时会通过调用d方法给exports设置一层代理
Object.defineProperty(exports, key, { enumerable: true, get: definition[key] })
当我们想要取值是会调用get函数，然后get函数返回对应值，这里的get函数执行的就是definition根据key定义的函数，从而得到相应的返回值。

  __webpack_require__.d(__webpack_exports__, {
        "sum": function () { return sum; }, // 这样返回便于衔接与后面代理的get默认返回一个函数
        "mul": function () { return mul; } // 这样就执行该函数得到我们想要的真正函数从而能正确的进行传参操作
      });

简单总结,跟CommonJS不同的点在于，要通过r方法加入特殊的标识表示是ESModule。存储的依然是exports对象，但是取值的方式变了，CommonJS是直接取值，ESModule是根据读取exports对象的key触发get函数代理到definition里面对应的函数。
例如读取sum属性时，exports.sum 触发 exports.sum.get() 而get被我们重写成 function () { return sum; }，所以 exports.sum.get() 返回 sum。sum的值当然就是模块里的sum函数了，这里就是一个闭包哦！

CommonJS和ESModule相互导入

index.js 入口

// es module导出内容, CommonJS导入内容
const { sum, mul } = require("./js/math");

// CommonJS导出内容, es module导入内容
import { dateFormat, priceFormat } from "./js/format";

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

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

dist.js 源代码

var __webpack_modules__ = ({
  "./src/index.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
      "use strict";
      __webpack_require__.r(__webpack_exports__);
      // CommonJS导出内容, es module导入内容
      var _js_format__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/format.js");
      // 根据判断是es 还是cjs
      var _js_format__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_js_format__WEBPACK_IMPORTED_MODULE_0__);

      // es module导出内容, CommonJS导入内容
      const math = __webpack_require__("./src/js/math.js");
      // 做了代理，但是还是在exports对象里，所以直接读值就好
      console.log(math.sum(20, 30));
      console.log(math.mul(20, 30));
      // 根据判断是es 还是cjs 然后再取值 es默认导出的话会放在default属性里 cjs直接读
      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__ = {};

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 () {
// 这里的modlue就是exports对象！！！！
  __webpack_require__.n = function (module) {
    // es默认导出的话会放在default属性里 所以返回 module['default']  cjs直接读module
    var getter = module && module.__esModule ?
      function () { return module['default']; } :
      function () { return module; };
    __webpack_require__.d(getter, { a: getter });
    return getter;
  };
}();


!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__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
}();


!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/index.js");

这里就不多费口舌一步步讲了，如果上面的两种方式你都看懂了的话基本上大部分流程是一样的，这里来讲讲不一样的地方。
1.多执行了一个立即执行函数 为函数__webpack_require__增加了n方法，此方法是为了判断模块是ESModule导出还是CommonJS导出，是es的话会采用module里面的default属性的值，因为es默认导出是放在module.default中的（不懂的可以看下面补充）。是cjs的话就直接导出module。（注：这里的module其实就是exports对象！！）
2.如果是CommonJS导出内容, es module导入内容 ，则会经过上面的n方法进行判断是什么导出方式，我们这里此时是cjs的导出方式则直接返回的是exports
3. 如果是es module导出内容, CommonJS导入内容，这个就更简单了，因为es导出也是在esports对象里，我们直接取就行，取的时候它内部会通过代理去拿值，所以我们直接拿就行。

补充es默认导出

这里补充下esmodule默认导出方式，可能上面的 n方法里的 module[‘default’] 大家没看懂

dev.js

import { ha, hb } from './js/testEsmodule.js'

ha('kzj')
hb('jjj')

testEsmodule.js

export function ha(str) {
    console.log(str + 'ha');
}
export function hb(str) {
    console.log(str + 'hb');
}

dist.js 源代码

(function () {
  "use strict";
  var __webpack_modules__ = ({
    "./src/js/testEsmodule.js":
      (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
        // 标记esmodule
        __webpack_require__.r(__webpack_exports__);
        function ha(str) {
          console.log(str + 'ha');
        }
        function hb(str) {
          console.log(str + 'hb');
        }
        // 默认导出则为exports对象增加default属性并赋导出值
        __webpack_exports__["default"] = ({ ha, hb });
      })

  });
  var __webpack_module_cache__ = {};

  function __webpack_require__(moduleId) {
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }
    var module = __webpack_module_cache__[moduleId] = {
      exports: {}
    };

    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

    return module.exports;
  }

  !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 });
    };
  }();


  var __webpack_exports__ = {};
  !function () {
    __webpack_require__.r(__webpack_exports__);
    var _js_testEsmodule_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/testEsmodule.js");
    _js_testEsmodule_js__WEBPACK_IMPORTED_MODULE_0__["default"].ha('kzj')
    _js_testEsmodule_js__WEBPACK_IMPORTED_MODULE_0__["default"].ha('jjj')
  }();
})()
  ;
//# sourceMappingURL=dist.js.map

这里最关键的就是函数里面执行了__webpack_exports__[“default”] = ({ ha, hb })，这表示为exports增加了default属性并把导出值放里面。所以我们现在的完整结构是这样的:
{exports: {default:{ha,hb}}
这样就解释了上面互相转换源码中我们n方法里面为什么是 module[‘default’]取值了。

END

创作不易，如果此文对你有帮助欢迎大家点赞收藏加关注！如有不对之处，望各位大佬不吝赐教。
三连加关注，更新不迷路