要想让打包后的文件可以阅读需要配置

  1. devtool: false

打包时使用命令

  1. webpack --mode developmet

使用 https://www.yuque.com/impressioncr/xosifb/eu2fgg 打包的dist文件分析。
语雀内容

1.Chunks文件

a.js

  1. module.exports = "a";

b.js

  1. module.exports = "b";

a_js-b_js.chunk.js

  1. (window["webpackJsonp"] = window["webpackJsonp"] || []).push([["a_js-b_js"],{
  3. /***/ "./a.js":
  4. /*!**************!*\
  5.   !*** ./a.js ***!
  6.   \**************/
  7. /*! unknown exports (runtime-defined) */
  8. /*! runtime requirements: module */
  9. /*! CommonJS bailout: module.exports is used directly at 1:0-14 */
  10. /***/ ((module) => {
  12. module.exports = "a";
  14. /***/ }),
  16. /***/ "./b.js":
  17. /*!**************!*\
  18.   !*** ./b.js ***!
  19.   \**************/
  20. /*! unknown exports (runtime-defined) */
  21. /*! runtime requirements: module */
  22. /*! CommonJS bailout: module.exports is used directly at 1:0-14 */
  23. /***/ ((module) => {
  25. module.exports = "b";
  27. /***/ })
  29. }]);

可以看到chunk的代码就是 在webpackJsonp数组里push一个当前的模块。将代码在chrome控制台运行。
Snipaste_2020-09-07_20-47-44.png
可以看到webpackJsonp数组第一项即为a_js-b_js模块。模块也是一个数组。
Snipaste_2020-09-07_20-51-11.png
webpackJsonp[0][1]是一个对象，为模块具体代码，key为单个模块的路径，value为一个方法即对应的key里js的代码。

2.bundle文件

pageA.js

  1. require(["./common"], function(common) {
  2.     common(require("./a"));
  3. });

pageA.bundle.js

  1. /******/ (() => { // webpackBootstrap
  2. /******/     var __webpack_modules__ = ({});
  3. /************************************************************************/
  4. /******/     // The module cache
  5. /******/     var __webpack_module_cache__ = {};
  6. /******/     
  7. /******/     // The require function
  8. /******/     function __webpack_require__(moduleId) {
  9. /******/         // Check if module is in cache
  10. /******/         if(__webpack_module_cache__[moduleId]) {
  11. /******/             return __webpack_module_cache__[moduleId].exports;
  12. /******/         }
  13. /******/         // Create a new module (and put it into the cache)
  14. /******/         var module = __webpack_module_cache__[moduleId] = {
  15. /******/             // no module.id needed
  16. /******/             // no module.loaded needed
  17. /******/             exports: {}
  18. /******/         };
  19. /******/     
  20. /******/         // Execute the module function
  21. /******/         __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  22. /******/     
  23. /******/         // Return the exports of the module
  24. /******/         return module.exports;
  25. /******/     }
  26. /******/     
  27. /******/     // expose the modules object (__webpack_modules__)
  28. /******/     __webpack_require__.m = __webpack_modules__;
  29. /******/     
  30. /************************************************************************/
  31. /******/     /* webpack/runtime/ensure chunk */
  32. /******/     (() => {
  33. /******/         __webpack_require__.f = {};
  34. /******/         // This file contains only the entry chunk.
  35. /******/         // The chunk loading function for additional chunks
  36. /******/         __webpack_require__.e = (chunkId) => {
  37. /******/             return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
  38. /******/                 __webpack_require__.f[key](chunkId, promises);
  39. /******/                 return promises;
  40. /******/             }, []));
  41. /******/         };
  42. /******/     })();
  43. /******/     
  44. /******/     /* webpack/runtime/get javascript chunk filename */
  45. /******/     (() => {
  46. /******/         // This function allow to reference async chunks
  47. /******/         __webpack_require__.u = (chunkId) => {
  48. /******/             // return url for filenames based on template
  49. /******/             return "" + chunkId + ".chunk.js";
  50. /******/         };
  51. /******/     })();
  52. /******/     
  53. /******/     /* webpack/runtime/hasOwnProperty shorthand */
  54. /******/     (() => {
  55. /******/         __webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
  56. /******/     })();
  57. /******/     
  58. /******/     /* webpack/runtime/load script */
  59. /******/     (() => {
  60. /******/         var inProgress = {};
  61. /******/         // data-webpack is not used as build has no uniqueName
  62. /******/         // loadScript function to load a script via script tag
  63. /******/         __webpack_require__.l = (url, done, key) => {
  64. /******/             if(inProgress[url]) { inProgress[url].push(done); return; }
  65. /******/             var script, needAttach;
  66. /******/             if(key !== undefined) {
  67. /******/                 var scripts = document.getElementsByTagName("script");
  68. /******/                 for(var i = 0; i < scripts.length; i++) {
  69. /******/                     var s = scripts[i];
  70. /******/                     if(s.getAttribute("src") == url) { script = s; break; }
  71. /******/                 }
  72. /******/             }
  73. /******/             if(!script) {
  74. /******/                 needAttach = true;
  75. /******/                 script = document.createElement('script');
  76. /******/         
  77. /******/                 script.charset = 'utf-8';
  78. /******/                 script.timeout = 120;
  79. /******/                 if (__webpack_require__.nc) {
  80. /******/                     script.setAttribute("nonce", __webpack_require__.nc);
  81. /******/                 }
  82. /******/         
  83. /******/                 script.src = url;
  84. /******/             }
  85. /******/             inProgress[url] = [done];
  86. /******/             var onScriptComplete = (prev, event) => {
  87. /******/                 // avoid mem leaks in IE.
  88. /******/                 script.onerror = script.onload = null;
  89. /******/                 clearTimeout(timeout);
  90. /******/                 var doneFns = inProgress[url];
  91. /******/                 delete inProgress[url];
  92. /******/                 script.parentNode && script.parentNode.removeChild(script);
  93. /******/                 doneFns && doneFns.forEach((fn) => fn(event));
  94. /******/                 if(prev) return prev(event);
  95. /******/             }
  96. /******/             ;
  97. /******/             var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
  98. /******/             script.onerror = onScriptComplete.bind(null, script.onerror);
  99. /******/             script.onload = onScriptComplete.bind(null, script.onload);
  100. /******/             needAttach && document.head.appendChild(script);
  101. /******/         };
  102. /******/     })();
  103. /******/     
  104. /******/     /* webpack/runtime/publicPath */
  105. /******/     (() => {
  106. /******/         __webpack_require__.p = "";
  107. /******/     })();
  108. /******/     
  109. /******/     /* webpack/runtime/jsonp chunk loading */
  110. /******/     (() => {
  111. /******/         // object to store loaded and loading chunks
  112. /******/         // undefined = chunk not loaded, null = chunk preloaded/prefetched
  113. /******/         // Promise = chunk loading, 0 = chunk loaded
  114. /******/         var installedChunks = {
  115. /******/             "pageA": 0
  116. /******/         };
  117. /******/         
  118. /******/         
  119. /******/         __webpack_require__.f.j = (chunkId, promises) => {
  120. /******/                 // JSONP chunk loading for javascript
  121. /******/                 var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
  122. /******/                 if(installedChunkData !== 0) { // 0 means "already installed".
  123. /******/         
  124. /******/                     // a Promise means "currently loading".
  125. /******/                     if(installedChunkData) {
  126. /******/                         promises.push(installedChunkData[2]);
  127. /******/                     } else {
  128. /******/                         if(true) { // all chunks have JS
  129. /******/                             // setup Promise in chunk cache
  130. /******/                             var promise = new Promise((resolve, reject) => {
  131. /******/                                 installedChunkData = installedChunks[chunkId] = [resolve, reject];
  132. /******/                             });
  133. /******/                             promises.push(installedChunkData[2] = promise);
  134. /******/         
  135. /******/                             // start chunk loading
  136. /******/                             var url = __webpack_require__.p + __webpack_require__.u(chunkId);
  137. /******/                             // create error before stack unwound to get useful stacktrace later
  138. /******/                             var error = new Error();
  139. /******/                             var loadingEnded = (event) => {
  140. /******/                                 if(__webpack_require__.o(installedChunks, chunkId)) {
  141. /******/                                     installedChunkData = installedChunks[chunkId];
  142. /******/                                     if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
  143. /******/                                     if(installedChunkData) {
  144. /******/                                         var errorType = event && (event.type === 'load' ? 'missing' : event.type);
  145. /******/                                         var realSrc = event && event.target && event.target.src;
  146. /******/                                         error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
  147. /******/                                         error.name = 'ChunkLoadError';
  148. /******/                                         error.type = errorType;
  149. /******/                                         error.request = realSrc;
  150. /******/                                         installedChunkData[1](error);
  151. /******/                                     }
  152. /******/                                 }
  153. /******/                             };
  154. /******/                             __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId);
  155. /******/                         } else installedChunks[chunkId] = 0;
  156. /******/                     }
  157. /******/                 }
  158. /******/         };
  159. /******/         
  160. /******/         // no prefetching
  161. /******/         
  162. /******/         // no preloaded
  163. /******/         
  164. /******/         // no HMR
  165. /******/         
  166. /******/         // no HMR manifest
  167. /******/         
  168. /******/         // no deferred startup
  169. /******/         
  170. /******/         // install a JSONP callback for chunk loading
  171. /******/         function webpackJsonpCallback(data) {
  172. /******/             var chunkIds = data[0];
  173. /******/             var moreModules = data[1];
  174. /******/         
  175. /******/             var runtime = data[3];
  176. /******/             // add "moreModules" to the modules object,
  177. /******/             // then flag all "chunkIds" as loaded and fire callback
  178. /******/             var moduleId, chunkId, i = 0, resolves = [];
  179. /******/             for(;i < chunkIds.length; i++) {
  180. /******/                 chunkId = chunkIds[i];
  181. /******/                 if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
  182. /******/                     resolves.push(installedChunks[chunkId][0]);
  183. /******/                 }
  184. /******/                 installedChunks[chunkId] = 0;
  185. /******/             }
  186. /******/             for(moduleId in moreModules) {
  187. /******/                 if(__webpack_require__.o(moreModules, moduleId)) {
  188. /******/                     __webpack_require__.m[moduleId] = moreModules[moduleId];
  189. /******/                 }
  190. /******/             }
  191. /******/             if(runtime) runtime(__webpack_require__);
  192. /******/             if(parentJsonpFunction) parentJsonpFunction(data);
  193. /******/             while(resolves.length) {
  194. /******/                 resolves.shift()();
  195. /******/             }
  196. /******/         
  197. /******/         };
  198. /******/         
  199. /******/         var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
  200. /******/         var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
  201. /******/         jsonpArray.push = webpackJsonpCallback;
  202. /******/         var parentJsonpFunction = oldJsonpFunction;
  203. /******/     })();
  204. /******/     
  205. /************************************************************************/
  206. /*!******************!*\
  207.   !*** ./pageA.js ***!
  208.   \******************/
  209. /*! unknown exports (runtime-defined) */
  210. /*! runtime requirements: __webpack_require__, __webpack_require__.e, __webpack_require__.oe, __webpack_require__.* */
  211. __webpack_require__.e(/*! AMD require */ "a_js-b_js-common_js").then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(/*! ./common */ "./common.js")]; (function(common) {
  212.     common(__webpack_require__(/*! ./a */ "./a.js"));
  213. }).apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__);}).catch(__webpack_require__.oe);
  214. /******/ })()
  215. ;

定义变量webpack_modules和webpack_module_cache

  1. var __webpack_modules__ = ({});
  2. var __webpack_module_cache__ = {};

webpackrequire__ 方法

  1.  / 定义 __webpack_require__ 方法 /
  2. function __webpack_require__(moduleId) {
  3.   // 先在在缓存对象 __webpack_module_cache__ 里找
  4.     if(__webpack_module_cache__[moduleId]) {
  5.         return __webpack_module_cache__[moduleId].exports;
  6.     }
  7.     // Create a new module (and put it into the cache)
  8.     var module = __webpack_module_cache__[moduleId] = {
  9.     // no module.id needed
  10.     // no module.loaded needed
  11.     exports: {}
  12.     };
  14.     // 执行模块里的方法
  15.     __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  16.     /******/     
  17.     // 返回模块的exports
  18.     return module.exports;
  19. }

ensure 方法

  1. (() => {
  2.   __webpack_require__.f = {};
  3.   // This file contains only the entry chunk.
  4.   // The chunk loading function for additional chunks
  5.   __webpack_require__.e = (chunkId) => {
  6.     return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
  7.       __webpack_require__.f[key](chunkId, promises);
  8.       return promises;
  9.     }, []));
  10.   };
  11. })();

获取js文件名的方法

  1. (() => {
  2.     // This function allow to reference async chunks
  3.   __webpack_require__.u = (chunkId) => {
  4.       // return url for filenames based on template
  5.       return "" + chunkId + ".chunk.js";
  6.   };
  7. })();

hasOwnProperty方法

  1. (() => {
  2.     __webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
  3. })();

加载脚本的方法 

  1. /* webpack/runtime/load script */
  2. (() => {
  3.     var inProgress = {};
  4.   / ... /
  5. })();

publicPath变量

  1. /* webpack/runtime/publicPath */
  2. (() => {
  3.     __webpack_require__.p = "";
  4. })();

加载chunks

  1. /* webpack/runtime/jsonp chunk loading */
  2. (() => {
  3.   / ... /
  4. })();

执行模块

  1. __webpack_require__.e(/*! AMD require */ "a_js-b_js-common_js").then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(/*! ./common */ "./common.js")]; (function(common) {
  2.     common(__webpack_require__(/*! ./a */ "./a.js"));
  3. }).apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__);}).catch(__webpack_require__.oe);