es2015 and plus

[briefy]

module system

import { Readable } from 'stream'

export default function(){
  return Readable;
}
export function obj(...args) {}
/******************************************************************************
 *  pay attention to the translated code,to use commonjs and es6 modules interchange
 *******************************************************************************/
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function () {
  return _stream.Readable;
};

exports.obj = obj;

var _stream = require('stream');
function obj() {}

[briefy]

• [ ] restudy this, and make sure how does webpack handle AMD ann umd

  webpackBootstrap

  // the following can be use in our module if we use webpack
  module  = {
     i: 3, // moduleId in number
     l: false,// if module loaded or not 
    exports: {}
  }
  
  __webpack_require__.m  // module itself, is a function 
  __webpack_require__.c  // loaded modules
  __webpack_require__.i  // it returns the first param
  __webpack_require__.d // define getter
  __webpack_require__.n // getmodule exports 
  __webpack_require__.o // same as Object.hasOwnProperty
  __webpack_require__.p // ?

(function webpackJsonp(modules) {
  var parentJsonpFunction = window["webpackJsonp"];
  var installedChunks = {
    2: 0
  }

  /**
   * jsonp callback, executed when chunk loaded
   *
   * @param {number} chunkIds
   * @param {Array} moreModules  modules in the chunk
   * @param {?} executeModules
   */
  window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
    var moduleId, chunkId, i = 0, resolves = [], result;
    /**
     * if chunk is static chunk
     *    installedChunks[chunkId] === 0
     * else
     *    installedChunks[chunkId] = [resolve, reject, promise]
     */
    for (; i < chunkIds.length; i++) {
      chunkId = chunkIds[i];
      if (installedChunks[chunkId]) {
        resolves.push(installedChunks[chunkId][0]);
      }
      installedChunks[chunkId] = 0;
    }

    for (moduleId in moreModules) {
      if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
        modules[moduleId] = moreModules[moduleId];
      }
    }

    // TODO: find out why we have to register chunk to the parent
    // now what i can see is we can share the same chunks with a parent webpack.config
    if (parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModule);

    // chunks loaded, resolve the promise
    while (resolves.length) {
      resolves.shift()();
    }

  }

  var installedModules = {};

  function __webpack_require__(moduleId) {
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }

    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };

    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    module.l = true;
    return module.exports;
  }

  __webpack_require__.e = function requireEnsure(chunkId) {
    var installedChunkData = installedChunks[chunkId];

    // static chunk,return a resolved promise
    if (installedChunkData === 0) {
      return new Promise(function (resolve) { resolve(); });
    }

    // chunk has been loaded, just return the promise
    if (installedChunkData) {
      return installedChunkData[2];
    }
    //  begin to load the chunk, this kind of loading is what we call (dynamic loading)
    //  installedChunkData[chunkId] = [resolve, reject, promise]
    var promise = new Promise(function (resolve, reject) {
      installedChunkData = installedChunks[chunkId] = [resolve, reject];
    });
    installedChunkDAta[2] = promise;

    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');

    script.type = 'text/javascript';
    script.charset = 'utf-8';
    script.async = true;
    script.timeout = 120000;

    // TODO: maybe this a CSP mechanism, but i need to find out
    if (__webpack_require__.nc) {
      script.setAttribute('nonce', __webpack_require__.nc);
    }

    script.src = __webpack__require__.p + "" + chunkId + ".web.js";
    var timeout = setTimeout(onScriptComplete, 120000);
    script.onerror = script.onload = onScriptComplete;
    function onScriptComplete() {
      script.onerror = script.onload = null;
      var chunk = installedChunks[chunkId];

      // if (chunk !== 0 && chunk),it means we tried loading the chunk and it failed
      if (chunk !== 0) {
        if (chunk) {
          chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
        }

        // remove the info, so that it may be reloaded somehow
        installedChunks[chunkId] = undefined;
      }
    };

    head.appendChild(script);

    return promise;

  }

  // module aware properties through __webpack__require__
  __webpack_require__.m = modules;

  __webpack_require__.c = installedModules;

  __webpack_require__.i = function (value) { return value };

  __webpack_require__.d = function (exports, name, gettter) {
    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(object, proerty);
  }

  __webpack_require__.p = '';

  return __webpack_require__(__webpack_require__.s = 218);
})([
  // out modules go here
]);

[briefy]

module:

it is some code we write in a file maybe by ESM or Commonjs or AMD, and will be wrapped by the func

     function(module,module.exports,__webpack__require__){
        /** your module goes here */
     }

chunk

chunk is produced when we do code-splitting, it has two categories, static chunk and lazy loaded chunk(dynamic loaded chunk) static chunk is loaded with a script in html dynamic chunk is a file loaded when needed;