美文网首页
Webpack工程化笔记(七): 模块打包原理

Webpack工程化笔记(七): 模块打包原理

作者: 听书先生 | 来源:发表于2022-02-20 22:22 被阅读0次

    对于项目工程中非常多的模块,Webpack打包时是通过什么方式将其有序组织在一起的呢?

    模块:
    // getInfo.js
    module.exports = {
        getSum: function(num1, num2) {
            return num1 + num2;
        }
    }
    
    // index.js
    const getInfo = require('./getInfo.js');
    const sum = getInfo.getSum(2,3);
    
    console.log(sum);
    
    

    bundle.js打包后的结果文件代码:

    // 立即执行匿名函数
    (function() {
      // 模块缓存
      var installedModules = {};
      // 实现require
      function __webpack_require__(moduleId) {
        ...
      }
      // 执行入口模块的加载
      return __webpack_require__(__webpack_require__.s = 0);
    })({
      // modules: 以key-value的形式储存所有被打包的模块
      0: function(module, exports, __webpack_require__) {
         // 打包入口
        module.exports = __webpack_require__("3qiv");
      },  
      "3qiv": function() {
        // index.js内容
      },
      jkzz: function(module, exports) {
        // getInfo.js的内容
      }
    
    })
    
    
    • 1、bundle文件分为几个部分,最外层是立即执行的匿名函数,主要是用来包裹bundle,并构成自身的作用域。
    • 2、installedModules对象,每个模块只在第一次被加载的时候执行,之后其导出值就被存储到这个对象里面,当再次被加载的时候直接从这里取值,而不会重新执行。
    • 3、__webpack_require__函数,对模块加载的实现,在浏览器中可以通过调用__webpack_require__(moduleId)来完成模块导入。
    • 4、modules对象,工程中所有产生了依赖关系的模块都会key-value的形式放在这里,key也就是一个模块的id,由数字或者一个很短的hash字符串构成;value则是由一个匿名函数包裹的模块实体,匿名函数的参数则赋予了每个模块导入和导出的能力。
    打包后的bundle文件在浏览器中的执行过程:
    • 1)、在最外层的匿名函数会初始化浏览器执行环境,包括定义installedModules对象、__webpack_require__函数等,为模块的加载和执行做一些准备工作。
    • 2)、加载入口模块。每个bundle都会有且只有一个入口模块,在上面的示例中,index.js是入口模块,在浏览器中会从它先开始执行。
    • 3)、执行模块代码,如果执行到了module.exports则会记录下模块的导出值,如果中间遇到require函数,也就是__webpack_require__函数,则会暂时交出执行权,进入__webpack_require__函数体内进行加载其他模块的逻辑。
    • 4)、在__webpack_require__函数中会判断即将加载的模块是否存在于installedModules中,如果存在则直接取值,否则回到上一步,执行该模块的代码来获取导出值。
    • 5)、所有依赖的模块都已执行完毕,最后执行权又回到入口模块,当入口模块的代码执行到结尾,则该bundle文件执行完毕了。
      第三步和第四步是一个递归的过程,Webpack为每一个模块创造了一个可以导入和导出模块的环境,但是本质上没有修改代码的执行逻辑,因此代码的执行顺序与模块加载的顺序是完全一致的。

    ·

    相关文章

      网友评论

          本文标题:Webpack工程化笔记(七): 模块打包原理

          本文链接:https://www.haomeiwen.com/subject/zqnvlrtx.html