webpack 编译后的代码分析

[Yang03]

webpack 编译后的代码

源码：

test.js
export function Test() {
    console.log('test')
}

index.js
import {Test} from './test'
Test()    

编译后：

(function(modules) {
    var installedModules = {};
   // object to store loaded and loading chunks
   // "0" means "already loaded"
   // Array means "loading", array contains callbacks
   var installedChunks = {
       1:0
   };
   var parentJsonpFunction = window["webpackJsonp"];
   window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
       // add "moreModules" to the modules object,
       // then flag all "chunkIds" as loaded and fire callback
       var moduleId, chunkId, i = 0, callbacks = [];
       for(;i < chunkIds.length; i++) {
           chunkId = chunkIds[i];
           if(installedChunks[chunkId])
               callbacks.push.apply(callbacks, installedChunks[chunkId]);
           installedChunks[chunkId] = 0;
       }
       for(moduleId in moreModules) {
           modules[moduleId] = moreModules[moduleId];
       }
       if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
       while(callbacks.length)
           callbacks.shift().call(null, __webpack_require__);
       if(moreModules[0]) {
           installedModules[0] = 0;
           return __webpack_require__(0);
       }
   };
   // The module cache
   // The require function
   function __webpack_require__(moduleId) {
       // Check if module is in cache
       if(installedModules[moduleId])
           return installedModules[moduleId].exports;

       // Create a new module (and put it into the cache)
       var module = installedModules[moduleId] = {
           exports: {},
           id: moduleId,
           loaded: false
       };
       // Execute the module function
       modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
       // Flag the module as loaded
       module.loaded = true;

       // Return the exports of the module
       return module.exports;
   }

})([]);

webpackJsonp([0,1],[

  function(module, exports, __webpack_require__) {

      'use strict';

      var _index = __webpack_require__(1);
      _index.Test();
  },
  function(module, exports) {

      'use strict';
      /* 是否支持esModule*/
      Object.defineProperty(exports, "__esModule", {
          value: true
      });
      exports.Test = Test;
      function Test() {
          console.log('test');
      }
  }]
) 

step 1 moreModules[0] = function(module, exports, __webpack_require__) {

  'use strict';

  var _index = __webpack_require__(1);
  _index.Test();

}

step2 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 这里相当 step1 的function 执行

step3 __webpack_require__(1) //return function Test(){}