webpack之打包结果解析（dist/main.js）

2024-02-20 20:15:58

感觉webpack的文章点击率高一些，那就继续吧~

今天来全方位解析一下webpack打包过后的结果

首先，在src/a.js先写这样的代码

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

在src/index.js中这样写，作为入口chunk

1 console.log("module index")
2 var a = require("./a")
3 console.log(a)

正常打包的main.js文件

  1 /******/ (function(modules) { // webpackBootstrap
  2 /******/     // The module cache
  3 /******/     var installedModules = {};
  4 /******/
  5 /******/     // The require function
  6 /******/     function __webpack_require__(moduleId) {
  7 /******/
  8 /******/         // Check if module is in cache
  9 /******/         if(installedModules[moduleId]) {
 10 /******/             return installedModules[moduleId].exports;
 11 /******/         }
 12 /******/         // Create a new module (and put it into the cache)
 13 /******/         var module = installedModules[moduleId] = {
 14 /******/             i: moduleId,
 15 /******/             l: false,
 16 /******/             exports: {}
 17 /******/         };
 18 /******/
 19 /******/         // Execute the module function
 20 /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 21 /******/
 22 /******/         // Flag the module as loaded
 23 /******/         module.l = true;
 24 /******/
 25 /******/         // Return the exports of the module
 26 /******/         return module.exports;
 27 /******/     }
 28 /******/
 29 /******/
 30 /******/     // expose the modules object (__webpack_modules__)
 31 /******/     __webpack_require__.m = modules;
 32 /******/
 33 /******/     // expose the module cache
 34 /******/     __webpack_require__.c = installedModules;
 35 /******/
 36 /******/     // define getter function for harmony exports
 37 /******/     __webpack_require__.d = function(exports, name, getter) {
 38 /******/         if(!__webpack_require__.o(exports, name)) {
 39 /******/             Object.defineProperty(exports, name, { enumerable: true, get: getter });
 40 /******/         }
 41 /******/     };
 42 /******/
 43 /******/     // define __esModule on exports
 44 /******/     __webpack_require__.r = function(exports) {
 45 /******/         if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 46 /******/             Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 47 /******/         }
 48 /******/         Object.defineProperty(exports, '__esModule', { value: true });
 49 /******/     };
 50 /******/
 51 /******/     // create a fake namespace object
 52 /******/     // mode & 1: value is a module id, require it
 53 /******/     // mode & 2: merge all properties of value into the ns
 54 /******/     // mode & 4: return value when already ns object
 55 /******/     // mode & 8|1: behave like require
 56 /******/     __webpack_require__.t = function(value, mode) {
 57 /******/         if(mode & 1) value = __webpack_require__(value);
 58 /******/         if(mode & 8) return value;
 59 /******/         if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 60 /******/         var ns = Object.create(null);
 61 /******/         __webpack_require__.r(ns);
 62 /******/         Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 63 /******/         if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 64 /******/         return ns;
 65 /******/     };
 66 /******/
 67 /******/     // getDefaultExport function for compatibility with non-harmony modules
 68 /******/     __webpack_require__.n = function(module) {
 69 /******/         var getter = module && module.__esModule ?
 70 /******/             function getDefault() { return module['default']; } :
 71 /******/             function getModuleExports() { return module; };
 72 /******/         __webpack_require__.d(getter, 'a', getter);
 73 /******/         return getter;
 74 /******/     };
 75 /******/
 76 /******/     // Object.prototype.hasOwnProperty.call
 77 /******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 78 /******/
 79 /******/     // __webpack_public_path__
 80 /******/     __webpack_require__.p = "";
 81 /******/
 82 /******/
 83 /******/     // Load entry module and return exports
 84 /******/     return __webpack_require__(__webpack_require__.s = "./src/index.js");
 85 /******/ })
 86 /************************************************************************/
 87 /******/ ({
 88 
 89 /***/ "./src/a.js":
 90 /*!******************!*\
 91   !*** ./src/a.js ***!
 92   \******************/
 93 /*! no static exports found */
 94 /***/ (function(module, exports) {
 95 
 96 eval("\nconsole.log(\"module a\")\nmodule.exports = \"a\";\n\n//# sourceURL=webpack:///./src/a.js?");
 97 
 98 /***/ }),
 99 
100 /***/ "./src/index.js":
101 /*!**********************!*\
102   !*** ./src/index.js ***!
103   \**********************/
104 /*! no static exports found */
105 /***/ (function(module, exports, __webpack_require__) {
106 
107 eval("console.log(\"module index\")\nvar a = __webpack_require__(/*! ./a */ \"./src/a.js\")\nconsole.log(a)\n\n//# sourceURL=webpack:///./src/index.js?");
108 
109 /***/ })
110 
111 /******/ });

我们先将以上代码改造一下，保留关键代码，删除一下多余注释

 1 (function(modules) { // webpackBootstrap
 2     // The module cache 用来缓存模块的对象
 3     var installedModules = {};
 4 
 5     // The require function 加载模块的函数
 6     function __webpack_require__(moduleId) {
 7 
 8         // Check if module is in cache 检查加载的模块是否在缓存中 如果是 则直接返回缓存的结果 不用重复加载
 9         if(installedModules[moduleId]) {
10             return installedModules[moduleId].exports;
11         }
12         // Create a new module (and put it into the cache) 创建一个新的模块并缓存
13         var module = installedModules[moduleId] = {
14             i: moduleId,
15             l: false,
16             exports: {}
17         };
18 
19         // Execute the module function 执行模块中的代码
20         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 
22         // Flag the module as loaded 标识该模块已经被加载过
23         module.l = true;
24 
25         // Return the exports of the module 返回模块的导出结果
26         return module.exports;
27     }
28     // Load entry module and return exports 加载入口模块并返回导出结果
29     return __webpack_require__(__webpack_require__.s = "./src/index.js");
30 })
31 ({
32   "./src/a.js":
33   (function(module, exports) {
34     // 用eval执行 ，浏览器会把eval中的代码视为单独的执行环境，当某个模块报错时，浏览器能显示出模块的路径，而且只显示该模块的源代码
35     eval("\nconsole.log(\"module a\")\nmodule.exports = \"a\";\n\n//# sourceURL=webpack:///./src/a.js?");
36   }),
37   "./src/index.js":
38   (function(module, exports, __webpack_require__) {
39     eval("console.log(\"module index\")\nvar a = __webpack_require__(/*! ./a */ \"./src/a.js\")\nconsole.log(a)\n\n//# sourceURL=webpack:///./src/index.js?");
40   })
41 });

代码的最外层是一个立即执行函数，最终可以简化成这样，这样就很好理解了

// modules 就是传进来的对象 
(function(modules) {
    // The require function 加载模块的函数
    function __webpack_require__(moduleId) {
    // 做模块缓存，此处省略
        // Execute the module function 执行模块中的代码
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // Return the exports of the module 返回模块的导出结果
        return module.exports;
    }
    // Load entry module and return exports 加载入口模块并返回导出结果
    return __webpack_require__("./src/index.js");
})({
  "./src/a.js": function(module, exports, __webpack_require__) { 
    // 此处省略
  },
  "./src/index.js": function(module, exports, __webpack_require__) { 
    // 此处省略
  },
});

码农公寓

相关文章