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);
/******/ })
内容版权声明:除非注明,否则皆为本站原创文章。
