# example.js ``` javascript import { increment as inc } from './increment'; var a = 1; inc(a); // 2 // async loading import("./async-loaded").then(function(asyncLoaded) { console.log(asyncLoaded); }); ``` # increment.js ``` javascript import { add } from './math'; export function increment(val) { return add(val, 1); }; ``` # dist/output.js
/******/ (function(modules) { /* webpackBootstrap */ }) ``` javascript /******/ (function(modules) { // webpackBootstrap /******/ // install a JSONP callback for chunk loading /******/ function webpackJsonpCallback(data) { /******/ var chunkIds = data[0]; /******/ var moreModules = data[1]; /******/ /******/ // add "moreModules" to the modules object, /******/ // then flag all "chunkIds" as loaded and fire callback /******/ var moduleId, chunkId, i = 0, resolves = []; /******/ 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]; /******/ } /******/ } /******/ if(parentJsonpFunction) parentJsonpFunction(data); /******/ while(resolves.length) { /******/ resolves.shift()(); /******/ } /******/ /******/ }; /******/ /******/ /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // object to store loaded and loading chunks /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched /******/ // Promise = chunk loading, 0 = chunk loaded /******/ var installedChunks = { /******/ 1: 0 /******/ }; /******/ /******/ /******/ /******/ // script path function /******/ function jsonpScriptSrc(chunkId) { /******/ return __webpack_require__.p + "" + chunkId + ".output.js" /******/ } /******/ /******/ // 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] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ 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; /******/ } /******/ /******/ // This file contains only the entry chunk. /******/ // The chunk loading function for additional chunks /******/ __webpack_require__.e = function requireEnsure(chunkId) { /******/ var promises = []; /******/ /******/ /******/ // JSONP chunk loading for javascript /******/ /******/ var installedChunkData = installedChunks[chunkId]; /******/ if(installedChunkData !== 0) { // 0 means "already installed". /******/ /******/ // a Promise means "currently loading". /******/ if(installedChunkData) { /******/ promises.push(installedChunkData[2]); /******/ } else { /******/ // setup Promise in chunk cache /******/ var promise = new Promise(function(resolve, reject) { /******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; /******/ }); /******/ promises.push(installedChunkData[2] = promise); /******/ /******/ // start chunk loading /******/ var head = document.getElementsByTagName('head')[0]; /******/ var script = document.createElement('script'); /******/ /******/ script.charset = 'utf-8'; /******/ script.timeout = 120; /******/ /******/ if (__webpack_require__.nc) { /******/ script.setAttribute("nonce", __webpack_require__.nc); /******/ } /******/ script.src = jsonpScriptSrc(chunkId); /******/ var timeout = setTimeout(function(){ /******/ onScriptComplete({ type: 'timeout', target: script }); /******/ }, 120000); /******/ script.onerror = script.onload = onScriptComplete; /******/ function onScriptComplete(event) { /******/ // avoid mem leaks in IE. /******/ script.onerror = script.onload = null; /******/ clearTimeout(timeout); /******/ var chunk = installedChunks[chunkId]; /******/ if(chunk !== 0) { /******/ if(chunk) { /******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type); /******/ var realSrc = event && event.target && event.target.src; /******/ var error = new Error('Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')'); /******/ error.type = errorType; /******/ error.request = realSrc; /******/ chunk[1](error); /******/ } /******/ installedChunks[chunkId] = undefined; /******/ } /******/ }; /******/ head.appendChild(script); /******/ } /******/ } /******/ return Promise.all(promises); /******/ }; /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __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; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = "dist/"; /******/ /******/ // on error function for async loading /******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; /******/ /******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; /******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); /******/ jsonpArray.push = webpackJsonpCallback; /******/ jsonpArray = jsonpArray.slice(); /******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); /******/ var parentJsonpFunction = oldJsonpFunction; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 2); /******/ }) /************************************************************************/ ```
``` javascript /******/ ([ /* 0 */ /*!*****************!*\ !*** ./math.js ***! \*****************/ /*! exports provided: add */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; }); function add() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) { sum += args[i++]; } return sum; } /***/ }), /* 1 */ /*!**********************!*\ !*** ./increment.js ***! \**********************/ /*! exports provided: increment */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "increment", function() { return increment; }); /* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./math */ 0); function increment(val) { return Object(_math__WEBPACK_IMPORTED_MODULE_0__["add"])(val, 1); }; /***/ }), /* 2 */ /*!********************!*\ !*** ./example.js ***! \********************/ /*! no exports provided */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _increment__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./increment */ 1); var a = 1; Object(_increment__WEBPACK_IMPORTED_MODULE_0__["increment"])(a); // 2 // async loading __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./async-loaded */ 3)).then(function(asyncLoaded) { console.log(asyncLoaded); }); /***/ }) /******/ ]); ``` # Info ## Unoptimized ``` Hash: 0a1b2c3d4e5f6a7b8c9d Version: webpack 4.8.0 Asset Size Chunks Chunk Names 0.output.js 479 bytes 0 [emitted] output.js 8.54 KiB 1 [emitted] main Entrypoint main = output.js chunk {0} 0.output.js 25 bytes <{1}> [rendered] > ./async-loaded [2] ./example.js 6:0-24 [3] ./async-loaded.js 25 bytes {0} [built] [exports: answer] import() ./async-loaded [2] ./example.js 6:0-24 chunk {1} output.js (main) 419 bytes >{0}< [entry] [rendered] > .\example.js main [0] ./math.js 142 bytes {1} [built] [exports: add] harmony side effect evaluation ./math [1] ./increment.js 1:0-29 harmony import specifier ./math [1] ./increment.js 3:11-14 [1] ./increment.js 94 bytes {1} [built] [exports: increment] harmony side effect evaluation ./increment [2] ./example.js 1:0-47 harmony import specifier ./increment [2] ./example.js 3:0-3 [2] ./example.js 183 bytes {1} [built] [no exports] single entry .\example.js main ``` ## Production mode ``` Hash: 0a1b2c3d4e5f6a7b8c9d Version: webpack 4.8.0 Asset Size Chunks Chunk Names 0.output.js 144 bytes 0 [emitted] output.js 1.75 KiB 1 [emitted] main Entrypoint main = output.js chunk {0} 0.output.js 25 bytes <{1}> [rendered] > ./async-loaded [] 6:0-24 [1] ./async-loaded.js 25 bytes {0} [built] [exports: answer] import() ./async-loaded ./example.js 6:0-24 chunk {1} output.js (main) 419 bytes >{0}< [entry] [rendered] > .\example.js main [0] ./example.js + 2 modules 419 bytes {1} [built] [no exports] single entry .\example.js main | ./example.js 183 bytes [built] | [no exports] | single entry .\example.js main | ./increment.js 94 bytes [built] | [exports: increment] | [all exports used] | harmony side effect evaluation ./increment ./example.js 1:0-47 | harmony import specifier ./increment ./example.js 3:0-3 | ./math.js 142 bytes [built] | [exports: add] | [all exports used] | harmony side effect evaluation ./math ./increment.js 1:0-29 | harmony import specifier ./math ./increment.js 3:11-14 ```