webapck 打包文件解析

Posted on | In | |

webapck 打包出的文件解析

原始程式碼

1
2
3
4
5
// a.js的內容
module.exports = 'HAHAHA'
// index.js的內容
let aExports  = require('./a');
console.log("Hello" + aExports);

打包後程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
(function (modules) { // webpackBootstrap
  // 2.The module cache (定義了一個緩存)
  var installedModules = {};

  // 3.the require function 配置了一個require方法(因為瀏覽器不能運行require)
  // 甚麼時候調用呢(27行會return)
  function __webpack_require__(moduleId) { // 5."./src/index.js"傳入

    // Check if module is in cache (6.不在緩存中)
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // Create a new module (and put it into the cache)
    // 7.定義了一個新的module把入口模塊傳進來
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };
    // Execute the module function
    // 執行(call)並把下面這些傳入(跑到第39行)
    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;
  }
  // Load entry module and return exports
  // 4.把index傳進來了
  return __webpack_require__(__webpack_require__.s = "./src/index.js"); //入口模塊
})
({   // 1. 傳入一個對象給modules
  "./src/a.js":  // key 
    (function (module, exports) {   //value
      eval("module.exports = 'HAHAHA'\r\n\n\n//# sourceURL=webpack:///./src/a.js?");
      // 9.最後跑到這的時候發現我們把module.exports 定義成了'HAHAHA'，因此回到第30行回傳了一個module.exports給aExports然後回到8.aExports  = module.exports 就是HAHAHA並執行console.log(\"Hello\" + aExports);n所以生成出HelloHAHAHA
    }),
  "./src/index.js":
    (function (module, exports, __webpack_require__) {
      eval("let aExports  = __webpack_require__(/*! ./a */ \"./src/a.js\");\r\nconsole.log(\"Hello\" + aExports);\r\n\r\n\n\n//# sourceURL=webpack:///./src/index.js?"); 
      // 8. __webpack_require__(/*! ./a */ \"./src/a.js\") 
        //執行了 __webpack_require__("./src/a.js\")，因為遞歸原因所以又跑了上面跑過的流程
    })
});

自