Webpack打包的代碼闯睹，允許我們使用各種各樣的模塊化，但是最常用的是CommonJS担神、ES Module楼吃。
需要的文件目錄如下：
image.png
format.js
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模塊化實現(xiàn)原理
// 定義了一個對象
// 模塊的路徑(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對象中的exports對象
module.exports = {
dateFormat,
priceFormat
}
})
}
// 定義一個對象, 作為加載模塊的緩存
var __webpack_module_cache__ = {};
// 是一個函數(shù), 當(dāng)我們加載一個模塊時, 都會通過這個函數(shù)來加載
function __webpack_require__(moduleId) {
// 1.判斷緩存中是否已經(jīng)加載過
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.加載執(zhí)行模塊
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
// 4.導(dǎo)出module.exports {dateFormat: function, priceForamt: function}
return module.exports;
}
// 具體開始執(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實現(xiàn)原理
// 1.定義了一個對象, 對象里面放的是我們的模塊映射
var __webpack_modules__ = {
"./src/es_index.js":
(function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
// 調(diào)用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__);
// 調(diào)用了d函數(shù): 給exports設(shè)置了一個代理definition
// exports對象中本身是沒有對應(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ù)的實現(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__這個函數(shù)對象添加了一個屬性: 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__這個函數(shù)對象添加了一個屬性: o -> 值function
__webpack_require__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
}();
!function () {
// __webpack_require__這個函數(shù)對象添加了一個屬性: 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");
