webpack之打包结果解析（dist/main.js）
Posted 过鹿人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack之打包结果解析（dist/main.js）相关的知识，希望对你有一定的参考价值。
感觉webpack的文章 点击率高一些，那就继续吧~
今天来全方位解析一下webpack打包过后的结果
首先，在src/a.js先写这样的代码
1 console.log("module a") 2 module.exports = "a";
在src/index.js中这样写，作为入口chunk
1 console.log("module index") 2 var a = require("./a") 3 console.log(a)
正常打包的main.js文件
1 /******/ (function(modules) { // webpackBootstrap 2 /******/ // The module cache 3 /******/ var installedModules = {}; 4 /******/ 5 /******/ // The require function 6 /******/ function __webpack_require__(moduleId) { 7 /******/ 8 /******/ // Check if module is in cache 9 /******/ if(installedModules[moduleId]) { 10 /******/ return installedModules[moduleId].exports; 11 /******/ } 12 /******/ // Create a new module (and put it into the cache) 13 /******/ var module = installedModules[moduleId] = { 14 /******/ i: moduleId, 15 /******/ l: false, 16 /******/ exports: {} 17 /******/ }; 18 /******/ 19 /******/ // Execute the module function 20 /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 /******/ 22 /******/ // Flag the module as loaded 23 /******/ module.l = true; 24 /******/ 25 /******/ // Return the exports of the module 26 /******/ return module.exports; 27 /******/ } 28 /******/ 29 /******/ 30 /******/ // expose the modules object (__webpack_modules__) 31 /******/ __webpack_require__.m = modules; 32 /******/ 33 /******/ // expose the module cache 34 /******/ __webpack_require__.c = installedModules; 35 /******/ 36 /******/ // define getter function for harmony exports 37 /******/ __webpack_require__.d = function(exports, name, getter) { 38 /******/ if(!__webpack_require__.o(exports, name)) { 39 /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 40 /******/ } 41 /******/ }; 42 /******/ 43 /******/ // define __esModule on exports 44 /******/ __webpack_require__.r = function(exports) { 45 /******/ if(typeof Symbol !== \'undefined\' && Symbol.toStringTag) { 46 /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: \'Module\' }); 47 /******/ } 48 /******/ Object.defineProperty(exports, \'__esModule\', { value: true }); 49 /******/ }; 50 /******/ 51 /******/ // create a fake namespace object 52 /******/ // mode & 1: value is a module id, require it 53 /******/ // mode & 2: merge all properties of value into the ns 54 /******/ // mode & 4: return value when already ns object 55 /******/ // mode & 8|1: behave like require 56 /******/ __webpack_require__.t = function(value, mode) { 57 /******/ if(mode & 1) value = __webpack_require__(value); 58 /******/ if(mode & 8) return value; 59 /******/ if((mode & 4) && typeof value === \'object\' && value && value.__esModule) return value; 60 /******/ var ns = Object.create(null); 61 /******/ __webpack_require__.r(ns); 62 /******/ Object.defineProperty(ns, \'default\', { enumerable: true, value: value }); 63 /******/ if(mode & 2 && typeof value != \'string\') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 64 /******/ return ns; 65 /******/ }; 66 /******/ 67 /******/ // getDefaultExport function for compatibility with non-harmony modules 68 /******/ __webpack_require__.n = function(module) { 69 /******/ var getter = module && module.__esModule ? 70 /******/ function getDefault() { return module[\'default\']; } : 71 /******/ function getModuleExports() { return module; }; 72 /******/ __webpack_require__.d(getter, \'a\', getter); 73 /******/ return getter; 74 /******/ }; 75 /******/ 76 /******/ // Object.prototype.hasOwnProperty.call 77 /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 78 /******/ 79 /******/ // __webpack_public_path__ 80 /******/ __webpack_require__.p = ""; 81 /******/ 82 /******/ 83 /******/ // Load entry module and return exports 84 /******/ return __webpack_require__(__webpack_require__.s = "./src/index.js"); 85 /******/ }) 86 /************************************************************************/ 87 /******/ ({ 88 89 /***/ "./src/a.js": 90 /*!******************!*\\ 91 !*** ./src/a.js ***! 92 \\******************/ 93 /*! no static exports found */ 94 /***/ (function(module, exports) { 95 96 eval("\\nconsole.log(\\"module a\\")\\nmodule.exports = \\"a\\";\\n\\n//# sourceURL=webpack:///./src/a.js?"); 97 98 /***/ }), 99 100 /***/ "./src/index.js": 101 /*!**********************!*\\ 102 !*** ./src/index.js ***! 103 \\**********************/ 104 /*! no static exports found */ 105 /***/ (function(module, exports, __webpack_require__) { 106 107 eval("console.log(\\"module index\\")\\nvar a = __webpack_require__(/*! ./a */ \\"./src/a.js\\")\\nconsole.log(a)\\n\\n//# sourceURL=webpack:///./src/index.js?"); 108 109 /***/ }) 110 111 /******/ });
我们先将以上代码改造一下，保留关键代码，删除一下多余注释
1 (function(modules) { // webpackBootstrap 2 // The module cache 用来缓存模块的对象 3 var installedModules = {}; 4 5 // The require function 加载模块的函数 6 function __webpack_require__(moduleId) { 7 8 // Check if module is in cache 检查加载的模块是否在缓存中 如果是 则直接返回缓存的结果 不用重复加载 9 if(installedModules[moduleId]) { 10 return installedModules[moduleId].exports; 11 } 12 // Create a new module (and put it into the cache) 创建一个新的模块并缓存 13 var module = installedModules[moduleId] = { 14 i: moduleId, 15 l: false, 16 exports: {} 17 }; 18 19 // Execute the module function 执行模块中的代码 20 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 22 // Flag the module as loaded 标识该模块已经被加载过 23 module.l = true; 24 25 // Return the exports of the module 返回模块的导出结果 26 return module.exports; 27 } 28 // Load entry module and return exports 加载入口模块并返回导出结果 29 return __webpack_require__(__webpack_require__.s = "./src/index.js"); 30 }) 31 ({ 32 "./src/a.js": 33 (function(module, exports) { 34 // 用eval执行 ，浏览器会把eval中的代码视为单独的执行环境，当某个模块报错时，浏览器能显示出模块的路径，而且只显示该模块的源代码 35 eval("\\nconsole.log(\\"module a\\")\\nmodule.exports = \\"a\\";\\n\\n//# sourceURL=webpack:///./src/a.js?"); 36 }), 37 "./src/index.js": 38 (function(module, exports, __webpack_require__) { 39 eval("console.log(\\"module index\\")\\nvar a = __webpack_require__(/*! ./a */ \\"./src/a.js\\")\\nconsole.log(a)\\n\\n//# sourceURL=webpack:///./src/index.js?"); 40 }) 41 });
代码的最外层是一个立即执行函数，最终可以简化成这样，这样就很好理解了
// modules 就是传进来的对象 (function(modules) { // The require function 加载模块的函数 function __webpack_require__(moduleId) { // 做模块缓存，此处省略 // Execute the module function 执行模块中的代码 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); // Return the exports of the module 返回模块的导出结果 return module.exports; } // Load entry module and return exports 加载入口模块并返回导出结果 return __webpack_require__("./src/index.js"); })({ "./src/a.js": function(module, exports, __webpack_require__) { // 此处省略 }, "./src/index.js": function(module, exports, __webpack_require__) { // 此处省略 }, });
以上是关于webpack之打包结果解析（dist/main.js）的主要内容，如果未能解决你的问题，请参考以下文章