webpack 打包之后的代码学习

心血来潮，看看打包之后的文件是怎么样的，如下所示，是简单的不能再简单的代码了

1、只有 简单 js 的打包

// number.js
export default function count (a, b) {
    return a + b
}

// largeNumber.js
import number from './number'
export default function add (a, b) {
    return number(a, b);
}

打包之后的代码如下所示

// 如下所示，这里是一个自执行的代码
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
  else if(typeof exports === 'object')
    // 把 打包的 文件名称 作为 变量 放到 exports 上面
		exports["largeNumber"] = factory();
  else
    // 在全局 挂载 当前的 打包文件
    root["largeNumber"] = factory();
    // 在上面 的函数传入的两个参数
})(window, function() {
                // 这里的 modules 就是 模块化了的 代码，也就是说，对应的 依赖 都被装在了这里
return  (function(modules) { // webpackBootstrap
 	// 对模块进行缓存
 	var installedModules = {};

 	function __webpack_require__(moduleId) {

    // 用来对当前文件是否 执行过，或者说 加载过 进行一个缓存
 		if(installedModules[moduleId]) {
 			return installedModules[moduleId].exports;
 		}
    // 每一个 模块 对应的 数据 结构
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};

    // 这里就是很简单的 执行了 对应 id 的 代码
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

 		module.l = true;

    // 最后 导出的 还是 挂载到 exports 上的 所有数据，这里就是 default
 		return module.exports;
 	}


 	__webpack_require__.m = modules;

 	__webpack_require__.c = installedModules;

  // 这个函数的 作用 就是 把 对应的 参数 使用 defineProperty 的方式 挂载到 exports 上面
 	__webpack_require__.d = function(exports, name, getter) {
 		if(!__webpack_require__.o(exports, name)) {
 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 		}
 	};
    // 这个函数的作用就是 给当前的模块加一个标记，表明这个就是 esModule
 	__webpack_require__.r = function(exports) {
 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		Object.defineProperty(exports, '__esModule', { value: true });
 	};

 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

 	__webpack_require__.p = "";


  // 这里的 __webpack_require__ 就是 前面定义的 执行函数，这里 id = 0 传入，也就是先执行 第一个 代码
 	return __webpack_require__(__webpack_require__.s = 0);
 })
/************************************************************************/
            //这里 传入的 就是 文件中的 代码 和对应的 依赖，变成了一个数组
 ([
/* 0 */   // 可以看到，这里标记的 / 0 / 就是主入口
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return add; });
                        // 获得 这个函数的依赖，也就是 count 函数
/* harmony import */ var _number__WEBPACK_IMPORTED_MODULE_0__ = 
// 导入模块 1
__webpack_require__(1);

function add (a, b) {
    // 执行 对应 代码 中 导出的 default 函数，也就是 count 函数
    return Object(_number__WEBPACK_IMPORTED_MODULE_0__["default"])(a, b);
}


/***/ }),
/* 1 */  // 第二个依赖，这里就是 传入的 number 文件夹中的默认导出 函数 ，也就是 对应 id === 1 的代码所在
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
                           // 使用了 d 函数，也就是说 把  count 函数 使用 default 参数 挂载到 __webpack_exports__ 上面去
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return count; });
function count (a, b) {
    return a + b
}

/***/ })
 ])["default"];
});

1. 这里的入口函数 是一个 自执行的代码，参数 就是 主入口函数 和对应的依赖函数

2. 依赖函数的参数 是一个数组，按照被加载的顺序 放置

3. 然后再 利用 函数作用域，将对应的 依赖函数 放进 对应模块的 export 上，默认是 default 参数，通过 defineProperty 设置

4. 然后在需要的时候，执行这个 default 里的 内容

2、加上 css 和 css-loader

在以下的代码里，可以发现 其实 单纯的加上css 只是作为字符串被编译到了 js 文件当中，这个 css 是不会被执行的，只会 被放到对应模块的 exports 里面

/** index.css */
.body {
    color: red;
    background-color: blue;
}

import number from './number'
import './index.css'
export default function add (a, b) {
    return number(a, b);
}

// 去除了 大量的 这里没有用到的代码
...
([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return add; });
/* harmony import */ var _number__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
                            // 导入第二个模块，也就是 css 模块
/* harmony import */ var _index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);

function add (a, b) {
    
    return Object(_number__WEBPACK_IMPORTED_MODULE_0__["default"])(a, b);
}
 ...

// /***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

// Imports
  // 导入 处理 css 的模块 3，我们直接去看 第三个 模块做了什么
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3);
// 直接在这里传入了 false，也就是说，没有 对应的 sourceMap
// 然后这里的返回值，就是 下文中的 list 数组
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module  这里的 css 都是 以字符串的 形式 出现在了 js 代码之中
           // 这里的 i 也就是 对应的 moduleId ，这里就是 2  
exports.push([module.i, ".body {\n    color: red;\n    background-color: blue;\n}", ""]);
// Exports  把 list 数组导出
module.exports = exports;


/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

// eslint-disable-next-line func-names
// 在执行 __webpack_require__ 的时候，其实导出的就是这个 exports ，所以 最后 执行的结果就是这个 function
// 再看上文中的 ___CSS_LOADER_API_IMPORT___ ，这里的 useSourceMap 被传入了 false
module.exports = function (useSourceMap) {
  var list = []; // return the list of modules as css string
  // 重新定义了 list 数组的 toString 方法
  list.toString = function toString() {
    return this.map(function (item) {
      // 这里的 content 直接就是 上文中的 css 字符串
      var content = cssWithMappingToString(item, useSourceMap);
      // 当前的 item[2] 就是一个 ''
      if (item[2]) {
        return "@media ".concat(item[2], " {").concat(content, "}");
      }
      // 这里返回的 依旧是 上文中的字符串
      return content;
    }).join('');
  }; // import a list of modules into the list
   ....

  return list;
};

function cssWithMappingToString(item, useSourceMap) {
  var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring

  var cssMapping = item[3];

  if (!cssMapping) {
    return content;
  }

  if (useSourceMap && typeof btoa === 'function') {
    var sourceMapping = toComment(cssMapping);
    var sourceURLs = cssMapping.sources.map(function (source) {
      return "/*# sourceURL=".concat(cssMapping.sourceRoot || '').concat(source, " */");
    });
    return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
  }

  return [content].join('\n');
} // Adapted from convert-source-map (MIT)


function toComment(sourceMap) {
  // eslint-disable-next-line no-undef
  var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
  var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
  return "/*# ".concat(data, " */");
}

/***/ })
/******/ ])["default"];
});