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

  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"],{
  2. /***/ "./a.js":
  3. /*!**************!*\
  4. !*** ./a.js ***!
  5. \**************/
  6. /*! unknown exports (runtime-defined) */
  7. /*! runtime requirements: module */
  8. /*! CommonJS bailout: module.exports is used directly at 1:0-14 */
  9. /***/ ((module) => {
  10. module.exports = "a";
  11. /***/ }),
  12. /***/ "./b.js":
  13. /*!**************!*\
  14. !*** ./b.js ***!
  15. \**************/
  16. /*! unknown exports (runtime-defined) */
  17. /*! runtime requirements: module */
  18. /*! CommonJS bailout: module.exports is used directly at 1:0-14 */
  19. /***/ ((module) => {
  20. module.exports = "b";
  21. /***/ })
  22. }]);

可以看到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_moduleswebpack_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. };
  13. // 执行模块里的方法
  14. __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  15. /******/
  16. // 返回模块的exports
  17. return module.exports;
  18. }

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);