Webpack

Webpack Runtime

Basic

With Lazy Loading

With Module Federation

Basic webpack bootstrap

Only two modules:

• src/index.js
• src/my-code.js

All using ES modules.

type WebpackModuleExports = Record<string, any>;

interface WebpackModule {
  exports: WebpackModuleExports;
}

type WebpackHarmonyExport = Record<string, () => any>;

type WebpackRequire = ((moduleId: string) => WebpackModuleExports) & {
  /**
   * webpack/runtime/hasOwnProperty shorthand
   **/
  o: (obj: object, prop: string) => boolean;
  /**
   * define getter functions for harmony exports
   */
  d: (mExports: WebpackModuleExports, definition: WebpackHarmonyExport) => void;

  // webpack/runtime/make namespace object */

  /**
   * define __esModule on exports
   **/
  r: (mExports: WebpackModuleExports) => void;
};

type WebpackModuleFactory = (
  _: unknown,
  mExports: WebpackModuleExports,
  webpackRequire: WebpackRequire
) => void;

/**
 * webpackBootstrap is run as IIFE
 */
export function webpackBootstrap() {
  var __webpack_modules__: Record<string, WebpackModuleFactory> = {
    /**
     * Example module, source code is
     *
     * ```js
     * export const myCode = 'my code';
     * ```
     */
    './src/my-code.js': (_, exports, webpack_require) => {
      webpack_require.r(exports);
      webpack_require.d(exports, {
        myCode: () => myCode,
      });

      const myCode = 'my code';
    },
  };

  var __webpack_module_cache__: Record<string, WebpackModule> = {};

  // We rename this from __webpack_require__ (remove last _) so typescript
  // can infer this properly
  function __webpack_require_(moduleId: string) {
    // Check if module is in cache
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }

    // Create a new module (and put it into the cache)
    var module: WebpackModule = (__webpack_module_cache__[moduleId] = {
      exports: {},
    });

    // Execute the module function
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

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

  var __webpack_require__: WebpackRequire = Object.assign(__webpack_require_, {
    o: (obj: object, prop: string) => Object.prototype.hasOwnProperty.call(obj, prop),
    d: (mExports: WebpackModuleExports, definition: WebpackHarmonyExport) => {
      for (var key in definition) {
        if (__webpack_require__.o(definition, key) && !__webpack_require__.o(mExports, key)) {
          Object.defineProperty(mExports, key, { enumerable: true, get: definition[key] });
        }
      }
    },
    // /* webpack/runtime/make namespace object */
    r: (mExports: WebpackModuleExports) => {
      if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
        Object.defineProperty(mExports, Symbol.toStringTag, { value: 'Module' });
      }
      Object.defineProperty(mExports, '__esModule', { value: true });
    },
  });

  // TODO: figure out what is the use of this
  var __webpack_exports__ = {};

  // entry wrapped in an IIFEE so it is isolated against other modules in the chunk
  (() => {
    /*
     * Source code of this entry is
     * ```js
     * import { myCode } from './my-code';
     *
     * console.log(myCode);
     * ```
     */
    __webpack_require__.r(__webpack_exports__);
    var myCodeModule = __webpack_require__('./src/my-code.js');

    console.log(myCodeModule.myCode);
  })();
}