webpack打包分析

  • 分析单文件打包:

    • 打包index.js:console.log(123);
    • webpack打包后被放到一个立即执行函数中
    • 会将入口文件的路径作为key,入口文件的内容作为value,放到一个对象中传递给立即执行函数
    • 在自调用函数中实现了require方法,并且调用了自己实现的require方法
    • 在调用自己实现的require时间入口文件路径作为key传递进去,然后通过这个路径取出对应的函数执行
     (function (modules) { // webpackBootstrap
       // 1.初始化一个缓存,用来存放加载模块,缓存有则在缓存中取,没有才去读取文件
       var installedModules = {};
    
       // 2.自实现require方法,moduleId是自己调用自己传入的模块路径
       function __webpack_require__(moduleId) {
    
         // 2.1判断缓存中有无当前需要的模块
         if (installedModules[moduleId]) {
           return installedModules[moduleId].exports;
         }
         // 2.2创建一个模块,将其放入缓存
         var module = installedModules[moduleId] = {
           i: moduleId,
           l: false,
           exports: {}
         };
    
         /* 通过call执行模块函数,modules是传入的对象,key是模块路径,value是需要执行的函数,修改函数this为空对象,将module和module.exports传递给函数*/
         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    
         // Flag the module as loaded
         module.l = true;
    
         // Return the exports of the module
         return module.exports;
       }
    
    
       // expose the modules object (__webpack_modules__)
       __webpack_require__.m = modules;
    
       // expose the module cache
       __webpack_require__.c = installedModules;
    
       // define getter function for harmony exports
       __webpack_require__.d = function (exports, name, getter) {
         if (!__webpack_require__.o(exports, name)) {
           Object.defineProperty(exports, name, {
             enumerable: true,
             get: getter
           });
         }
       };
    
       // 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
         });
       };
    
       // create a fake namespace object
       // mode & 1: value is a module id, require it
       // mode & 2: merge all properties of value into the ns
       // mode & 4: return value when already ns object
       // mode & 8|1: behave like require
       __webpack_require__.t = function (value, mode) {
         if (mode & 1) value = __webpack_require__(value);
         if (mode & 8) return value;
         if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
         var ns = Object.create(null);
         __webpack_require__.r(ns);
         Object.defineProperty(ns, 'default', {
           enumerable: true,
           value: value
         });
         if (mode & 2 && typeof value != 'string')
           for (var key in value) __webpack_require__.d(ns, key, function (key) {
             return value[key];
           }.bind(null, key));
         return ns;
       };
    
       // getDefaultExport function for compatibility with non-harmony modules
       __webpack_require__.n = function (module) {
         var getter = module && module.__esModule ?
           function getDefault() {
             return module['default'];
           } :
           function getModuleExports() {
             return module;
           };
         __webpack_require__.d(getter, 'a', getter);
         return getter;
       };
    
       // Object.prototype.hasOwnProperty.call
       __webpack_require__.o = function (object, property) {
         return Object.prototype.hasOwnProperty.call(object, property);
       };
    
       // __webpack_public_path__
       __webpack_require__.p = "";
       // Load entry module and return exports
       return __webpack_require__(__webpack_require__.s = "./src/js/index.js");
     })({
       "./src/js/index.js": (function (module, exports) {
         console.log(123);
       })
     });

  • 分析多文件打包:

    • a.js:module.exports = "lnj";
    • b.js:module.exports = "33";
    • 打包index.js:

      const name = require('./a.js');
      const age = require('./b/b.js');
      
      console.log("it666");
      console.log(name, age);
    • 其他和单文件打包类似,唯一不同的是立即执行函数传入的参数不同
    • 通过调用__webpack_require__方法,执行a.js和b.js中的代码,通过返回module.exports将值赋值给变量
    ({
       "./src/js/a.js": (function (module, exports) {
         module.exports = "lnj";
       }),
       "./src/js/b/b.js": (function (module, exports) {
         module.exports = "33";
       }),
       "./src/js/index.js": (function (module, exports, __webpack_require__) {
         const name = __webpack_require__( /*! ./a.js */ "./src/js/a.js");
         const age = __webpack_require__( /*! ./b/b.js */ "./src/js/b/b.js");
         console.log("it666");
         console.log(name, age);
       })
     })

最后修改:2021 年 04 月 11 日 02 : 11 AM
如果觉得我的文章对你有用,请随意赞赏!