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

感受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__) { 
    // 此處省略
  },
});