webpack打包結果說明

• 打包入口

import {message, methods} from './module01'
const sayHello = require('./module02')
function component() {
  sayHello()
  methods()
  var element = document.createElement('div');
  
  element.innerHTML = message

  return element;
}

document.body.appendChild(component());

• 模塊1

const message = 'hello world'
console.log('this is module01')
const methods = function(){
  console.log('hello world')
}
export {message, methods}

• 模塊2

const sayHello = () => {
  console.log('hello world')
}
const sayBye = () => {
  console.log('Bye Bye')
}
console.log('this is module02')
exports.sayHello =  sayHello
exports.sayHello = sayBye

• 打包結果

打包結果是一個當即執行函數表達式

(function (modules) {
  // 緩存全部模塊」輸出「的內容
  var installedModules = {};

  function __webpack_require__(moduleId) {
    /*
     *檢查緩存中是否有該模塊，若是有則返回該模塊的export
     *若是沒有，則執行下面的步驟：運行該模塊，並將模塊的」輸出「放置在緩存中 
     */
    if (installedModules[moduleId]) {

      return installedModules[moduleId].exports;

    }
    // 建立一個新的模塊
    var module = installedModules[moduleId] = {
      i: moduleId,   // 模塊的id
      l: false,      // 模塊的」輸出「是否加載到緩存中
      exports: {}    // 模塊的」輸出「

    };
    // 執行對應的模塊，並將模塊的」輸出「綁定到module.exports上
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    // 修改是否加載的標識
    module.l = true;
    // 返回模塊的」輸出「
    return module.exports;

  }
  // 全部的模塊
  __webpack_require__.m = modules;
  // 全部被緩存的模塊
  __webpack_require__.c = installedModules;
  // 定義一個getter方法
  __webpack_require__.d = function (exports, name, getter) {
    // 若是一個對象沒有name對應的屬性，則在該對象上定義該屬性
    if (!__webpack_require__.o(exports, name)) {

      Object.defineProperty(exports, name, {

        configurable: false,

        enumerable: true,

        get: getter

      });

    }

  };
  // 
  __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;

  };
  // 定義一個方法：判斷一個對象是否有某一屬性
  __webpack_require__.o = function (object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  };

  // __webpack_public_path__
  __webpack_require__.p = "";
  // 從第一個模塊開始加載（執行）
  return __webpack_require__(__webpack_require__.s = 0);

})// 匿名函數定義結束
([
  /* 0：打包的起點，起始模塊 */
  (function (module, __webpack_exports__, __webpack_require__) {
     // 因爲該模塊使用了ES6語法import，因此須要在「輸出」的對象上定義 __esModule屬性
     "use strict";
     Object.defineProperty(__webpack_exports__, "__esModule", {
       value: true
     });
     /* 代表模塊1是經過ES6語法來導入的 */
     var __WEBPACK_IMPORTED_MODULE_0__module01__ = __webpack_require__(1);

     // 代表模塊2是經過CommonJS語法來導入的
     const sayHello = __webpack_require__(2)

     function component() {
       sayHello()
       // 調用模塊1輸出的b方法
       Object(__WEBPACK_IMPORTED_MODULE_0__module01__["b"])()
       var element = document.createElement('div');
       // 使用模塊1輸出的a屬性
       element.innerHTML = __WEBPACK_IMPORTED_MODULE_0__module01__["a"]

       return element;
     }

     document.body.appendChild(component());

     /***/
   }),
  /* 1 */
  (function (module, __webpack_exports__, __webpack_require__) {
     // 當前模塊是經過ES6語法來導入/輸出模塊的
     "use strict";
     /* 根據順序，將當前模塊輸出定義在 __webpack_exports__上 */
     __webpack_require__.d(__webpack_exports__, "a", function () {
       return message;
     });
     /* harmony export (binding) */
     __webpack_require__.d(__webpack_exports__, "b", function () {
       return methods;
     });
     const message = 'hello world'
     console.log('this is module01')
     const methods = function () {
       console.log('hello world')
     }
   }),
  /* 2 */
  (function (module, exports) {

     const sayHello = () => {
       console.log('hello world')
     }
     const sayBye = () => {
       console.log('Bye Bye')
     }
     console.log('this is module02')
     // 模塊2是經過CommonJS的方式輸出的，因此直接在exports上添加「輸出」結果
     exports.sayHello = sayHello
     exports.sayHello = sayBye

     /***/
   })
]);