关于webpack4:根据webpack打包规则实现简单的打包手写实现

首先导入导出分为几类

• CommonJS 导入 CommonJS
• EsModule 导入 CommonJS
• EsModule 导入 EsModule

依据实现规定，简略代码样例

// index.js

// import log,{age} from "./log.js"
// // let log = require('./log.js')
// console.log('index.js 内容')
// console.log("log", log,age)


// log.js
// CommonJS 导出
module.exports ="logger"
// export default "jack"
// export const age = 18;

手写模仿实现代码

(function (modules) {
    // 缓存被加载过的模块
    let installedModules = {};

    // 定义一个__webpak_require__办法来替换 import require 的加载操作
    function __webpack_require__(moduleId) {
        // 缓存优先，判断以后缓存中是否存在要被加载的模块，如果存在就间接返回
        if (installedModules[moduleId]) {return installedModules[moduleId].exports
        }

        // 如果以后缓存中不存在，就须要本人定义，执行被导入的模块内容加载
        let module = installedModules[moduleId] = {
            i: moduleId,
            l: false,
            exports: {}}

        // 调用以后 moduleId 对应的函数，实现内容的加载,__webpack_require__c 参数存在是为了解决递归调用的问题
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)

        // 当上述办法调用完结之后，批改 l 的值，标识以后模块内容曾经加载实现了
        module.l = true

        // 加载工作实现之后，将拿回来的内容返回至调用地位
        return module.exports
    }

    // 定义 m 属性来保留 modules
    __webpack_require__.m = modules

    // 定义 c 属性用于保留 cache
    __webpack_require__.c = installedModules

    // 定义 o 办法用于判断对象身上是否存在制订属性
    __webpack_require__.o = function (object, property) {return Object.prototype.hasOwnProperty(object, property)
    }

    // 定义 d 办法用于在对象身上增加制订属性，并且给该属性提供一个 getter
    __webpack_require__.d = function (exports, name, getter) {if (!__webpack_require__.o(exports, name)) {
            Object.defineProperty(exports, name, {
                enumerable: true,
                get: getter
            });
        }
    }

    // 定义 r 办法用于标识以后模块 EsModule
    __webpack_require__.r = function (exports) {if (typeof Symbol !== undefined && Symbol.toStringTag) {
            Object.defineProperty(exports, Symbol.toStringTag, {value: "module"})
        }
        Object.defineProperty(exports, "__esModule", {value: true})
    }

    // 定义 n 办法用于设置具体的 getter
    __webpack_require__.n = function (module) {let getter = module && module.__esModule ? function getDefault() {return module['default']
        } : function getModuleExports() {return module}
        __webpack_require__.d(getter, 'a', getter)
        return getter
    }

    // 定义 p 属性，用于保留资源拜访门路
    __webpack_require__.p = ""

    // 调用__webpack_require__办法，执行模块导入和加载操作
    return __webpack_require__(__webpack_require__.s = "./src/index.js")

})(
    // CommonJS 导入 CommonJS
    //     {//     "./src/index.js": (function (module, exports, __webpack_require__) {//         let log = __webpack_require__( /*! ./log.js */ "./src/log.js")
    //         console.log('index.js 内容')
    //         console.log("log", log)
    //     }),
    //     "./src/log.js": (function (module, exports) {
    //         // CommonJS 导出
    //         module.exports = "logger"
    //     })
    // }

    // EsModule 导入 CommonJS
    {"./src/index.js": (function (module, __webpack_exports__, __webpack_require__) {
            "use strict";
            __webpack_require__.r(__webpack_exports__);
            var _log_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./log.js */ "./src/log.js");
            var _log_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(_log_js__WEBPACK_IMPORTED_MODULE_0__);
            console.log('index.js 内容')
            console.log("log", _log_js__WEBPACK_IMPORTED_MODULE_0___default.a)
        }),
        "./src/log.js": (function (module, exports) {module.exports = "logger"})
    }

    // EsModule 导入 EsModule
    // {//     "./src/index.js": (function (module, __webpack_exports__, __webpack_require__) {
    //         "use strict";
    //         __webpack_require__.r(__webpack_exports__);
    //         var _log_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./log.js */ "./src/log.js");
    //         console.log('index.js 内容')
    //         console.log("log", _log_js__WEBPACK_IMPORTED_MODULE_0__["default"], _log_js__WEBPACK_IMPORTED_MODULE_0__["age"])
    //     }),
    //     "./src/log.js": (function (module, __webpack_exports__, __webpack_require__) {
    //         "use strict";
    //         __webpack_require__.r(__webpack_exports__);
    //         __webpack_require__.d(__webpack_exports__, "age", function () {
    //             return age;
    //         });
    //         __webpack_exports__["default"] = ("jack");
    //         const age = 18;
    //     })
    // }
)

通过编译生成的 index.html，引入手写built.js 文件，控制台能够失常打印