【webpack】webpack模块化原理学习笔记
目录
前言
预备知识
立即执行函数
obj.hasOwnProperty(prop)
Symbol.toStringTag
CommonJS实现原理
ESModule实现原理
CommonJS与ESModule相互导入实现原理
前言
我们发现webpack会帮助我们支持各种模块化方案，可以通过阅读打包后的文件来了解一下CommonJS与ESModule在webpack5中的实现原理。
预备知识
立即执行函数
立即执行函数会形成一个单独的作用域，我们可以封装一些临时变量或者局部变量，避免污染全局变量，写法如下
// 1
(function(){
// ...
})()
// 2
(function(){
// ...
}())()，！，+，-，=等运算符都能起到立即执行的作用，这些运算符的作用就是将匿名函数或函数声明转换为函数表达式。也就是说如下写法也可行
!function () {
// ...
}();
obj.hasOwnProperty(prop)
用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性
const object1 = {};
object1.property1 = 42;
console.log(object1.hasOwnProperty('property1')); // true
console.log(object1.hasOwnProperty('toString')); // false
console.log(object1.hasOwnProperty('hasOwnProperty')); // falseSymbol.toStringTag
// 自己创建的类只会返回默认的 Object 标签
class ValidatorClass {}
Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"
// 加上 toStringTag 属性，你的类也会有自定义的类型标签了
class ValidatorClass {
get [Symbol.toStringTag]() {
return "Validator";
}
}
Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]"CommonJS实现原理
打包前代码如下
// 打包入口
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
}
打包完是一个立即执行函数
在这个立即执行函数中定义了一个__webpack_modules__对象，对象的key是打包后的路径，value是一个函数，并且只包含require导入的路径
// 模块的路径(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
}
})
}定义了一个__webpack_module_cache__对象，作为加载模块的缓存
// 定义一个对象, 作为加载模块的缓存
var __webpack_module_cache__ = {};定义了一个function __webpack_require__(moduleId) {} 通过这个函数来加载模块，moduleId是一个字符串路径，执行函数时，首先判断缓存中是否已加载过，如果已经加载过直接返回即可，否则给缓存赋初值{exports: {}}；然后加载执行模块，通过最初定义的__webpack_modules__并以moduleId作为key取到value，执行函数，并传三个参数：module、module.exports、__webpack_require__；最后导出对应模块
// 是一个函数, 当我们加载一个模块时, 都会通过这个函数来加载
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"));
}();ESModule实现原理
打包前代码如下
// 打包入口
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;
}
打包完后同样时一个立即执行函数
在这个立即执行函数中定义了一个__webpack_modules__对象，对象的key是打包后的路径，value是一个函数，并且除了包含import导入的路径外，还有入口文件的路径
// 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
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__);
// 调用了d函数: 给exports设置了一个代理definition
// 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;
}
})
}; 定义了一个__webpack_module_cache__对象，作为加载模块的缓存
// 2.模块的缓存
var __webpack_module_cache__ = {};定义了一个function __webpack_require__(moduleId) {} 通过这个函数来加载模块，moduleId是一个字符串路径，执行函数时，首先判断缓存中是否已加载过，如果已经加载过直接返回即可，否则给缓存赋初值{exports: {}}；然后加载执行模块，通过最初定义的__webpack_modules__并以moduleId作为key取到value，执行函数，并传三个参数：module、module.exports、__webpack_require__；最后导出对应模块
// 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;
}d函数其实就是设置代理，o函数和r函数介绍在文章后面
!function () {
// __webpack_require__这个函数对象添加了一个属性: 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] });
}
}
};
}();o函数用来检测一个对象obj是否含有特定的自身属性prop，如果有则返回true，没有返回false
!function () {
// __webpack_require__这个函数对象添加了一个属性: o -> 值function
__webpack_require__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
}();r函数做了如下两件事：
1. 如果支持Symbol，Object.prototype.toString.call() 返回的结果是"[object Module]"
2. 添加key属性__esModule，value值为true
!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 });
};
}();CommonJS与ESModule相互导入实现原理
打包前代码如下
// 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"));
console.log(abc);
// js/math.js
export const sum = (num1, num2) => {
return num1 + num2;
}
export const mul = (num1, num2) => {
return num1 * num2;
}
// js/format.js
const dateFormat = (date) => {
return "2020-12-12";
}
const priceFormat = (price) => {
return "100.00";
}
console.log(cba);
module.exports = {
dateFormat,
priceFormat
}
上打包后代码，检验一下上面两种是否看懂了
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导出内容, CommonJS导入内容
const math = __webpack_require__("./src/js/math.js");
// CommonJS导出内容, es module导入内容
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");参考链接：深入Webpack5等构建工具(gulp/rollup/vite)-学习视频教程-腾讯课堂 (qq.com)