webpack-编译结果分析

怼烎@ 2021-08-27 02:32 408阅读 0赞

#### src文件下有有两个文件 ####

###### index.js ######

console.log("index module")
    var a = require("./a")
    a.abc();
    console.log(a)

###### a.js ######

console.log("module a")
    module.exports = "a";

#### 手写npm run build 编译后的结果 ####

//合并两个模块
    // ./src/a.js
    // ./src/index.js
    
    (function (modules) { 
        var moduleExports = { }; //用于缓存模块的导出结果
    
        //require函数相当于是运行一个模块，得到模块导出结果
        function __webpack_require(moduleId) {  //moduleId就是模块的路径
            if (moduleExports[moduleId]) { 
                //检查是否有缓存
                return moduleExports[moduleId];
            }
    
            var func = modules[moduleId]; //得到该模块对应的函数
            var module = { 
                exports: { }
            }
            func(module, module.exports, __webpack_require); //运行模块
            var result = module.exports; //得到模块导出的结果
            moduleExports[moduleId] = result; //缓存起来
            return result;
        }
    
        //执行入口模块
        return __webpack_require("./src/index.js"); //require函数相当于是运行一个模块，得到模块导出结果
    })({  //该对象保存了所有的模块，以及模块对应的代码
        "./src/a.js": function (module, exports) { 
            eval("console.log(\"module a\")\nmodule.exports = \"a\";\n //# sourceURL=webpack:///./src/a.js")
        },
        "./src/index.js": function (module, exports, __webpack_require) { 
            eval("console.log(\"index module\")\nvar a = __webpack_require(\"./src/a.js\")\na.abc();\nconsole.log(a)\n //# sourceURL=webpack:///./src/index.js")
          
        }
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，408人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack学习之编译结果分析

什么是webpack 当开发一个具有规模的程序，将会遇到非常多的非业务问题，这些问题包括：执行效率、兼容性、代码的可维护性、可扩展性、团队协作、测试等等、我们将这些问题称

古城微笑少年丶/ 2022年12月04日 01:20/ 0 赞/ 168 阅读

相关 jmap运行结果分析

目录 jmap -heap PID 运行结果分析 jmap -heap PID 运行结果分析 Attaching to process

绝地灬酷狼/ 2022年10月24日 01:35/ 0 赞/ 166 阅读

相关使用webpack打包编译TypeScript代码

TypeScript打包 webpack整合通常情况下，实际开发中我们都需要使用构建工具对代码进行打包； TS同样也可以结合构建工具一起使用，下边以webpac

港控/mmm°/ 2022年10月10日 13:57/ 0 赞/ 319 阅读

相关 webpack 项目使用webpack-dev-server 自动编译（2）

在上一篇的博客中我们使用webpack 创建了一个项目创建webpack 项目（1） [https://blog.csdn.net/datouniao1

淩亂°似流年/ 2022年09月03日 07:22/ 0 赞/ 245 阅读

相关 top命令结果分析

本文转自百度经验：http://jingyan.baidu.com/article/4d58d5412917cb9dd4e9c0ed.html 记载下来方便以后学习查找 t

分手后的思念是犯贱/ 2022年06月07日 00:51/ 0 赞/ 178 阅读

相关 webpack和babel的运行结果分析

webpack模块化原理-commonjs [segmentfault.com/a/119000001…][segmentfault.com_a_119000001]

﹏ヽ暗。殇╰゛Y/ 2022年01月20日 15:17/ 0 赞/ 275 阅读

相关 2.【webpack】打包编译生成html

在上一篇中讲到了webpack的简单使用，从webpack的初始化，项目创建到项目编译，在本篇为大家讲解webpack如何打包html 目录 \------------

太过爱你忘了你带给我的痛/ 2022年01月11日 06:37/ 0 赞/ 517 阅读

相关 Webpack编译结果浅析

如今[Webpack][]已经是一个不可或缺的前端构建工具，借助这个构建工具，我们可以使用比较新的技术（浏览器不能直接支持）来开发。你是否好奇你写的代码经过Webpack构

曾经终败给现在/ 2021年12月17日 06:34/ 0 赞/ 299 阅读

相关 webpack-编译结果分析

src文件下有有两个文件 index.js console.log("index module") var a = require("./a")

怼烎@/ 2021年08月27日 02:32/ 0 赞/ 409 阅读

相关 webpack-编译过程分析

webpack 编译过程 webpack 的作用是将源代码编译（构建、打包）成最终代码 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

桃扇骨/ 2021年08月26日 19:45/ 0 赞/ 472 阅读