webpack 模块机制
前面70行还是熟悉的 webpack 模块机制的基础代码,关于它的细致解读参见上一篇webpack模块机制,编译后的代码格式如下,并且我做了代码美化,并且插上了中文注释
/******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ // 缓存模块,所有被加载过的模块都会成为installedModules对象的属性,靠函数__webpack_require__做到。 /******/ var installedModules = {}; /******/ /******/ // 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) /******/ // 创造一个新模块并放入缓存中,i是模块标识,l意为是否加载此模块完毕,exports是此模块执行后的输出对象 /******/ 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 标为true代表模块执行完成。 /******/ module.l = true; /******/ /******/ // Return the exports of the module 返回此模块输出的对象 /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ // webpack 私有变量,保存传入的modules,即所有的模块组成的数组 /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ // 保存缓存中的模块数组 /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ // 为 es6 exports 定义 getter /******/ __webpack_require__.d = function(exports, name, getter) { /******/ // 如果 exports 输出的对象本身不包含 name 属性时,定义一个。 /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ // 解决 ES module 和 Common js module 的冲突,ES 则返回 module['default'] /******/ __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 /******/ // 工具方法,判断是否object有property属性。 /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ // 大概和 webpack.config.js 的 output 有关吧,webpack 的公共路径 /******/ __webpack_require__.p = "/dist/"; /******/ /******/ // Load entry module and return exports 执行第一个依赖模块并且返回它输出。 /******/ return __webpack_require__(__webpack_require__.s = 0); /******/ })
内容版权声明:除非注明,否则皆为本站原创文章。