### GITHUB
目前社区react非常流行，与react流行并驾齐驱的莫过于webpack了，和gulp,grunt等传统的构建流不一样，webpack给了我们更多的可能，一直以来在使用webpack，偶尔闲下来觉得是时候看看bundle后的文件的内容了
### 项目目录
├── lib
│ ├── a.js
│ ├── b.js
│ └── index.js
a.js
function a (){
console.log('sss')
}
function b(){
console.log('ssssv')
}
export { b,a }
b.js
import { a } from './a'
function b(){
a();
console.log('b')
}
export default b;
index.js
import b from './b'
function index (){
b();
console.log('index')
}
export default index
很简单的代码内容，可以看出代码中的引用，index.js引用了b.js，b.js间接引用了a.js，并没有其他的黑科技输入
### webpack.config.js内容
var path = require('path');
module.exports = {
entry : {
index : './lib/index.js'
},
output : {
filename : '[name].js',
path : path.join(__dirname,'/dist'),
libraryTarget : 'umd',
library : 'anaylaze'
},
module : {
loaders : [{
test : '/\.jsx?$/',
loader : 'babel-loader',
query : {
presets : ['es2015','stage-0']
}
}]
}
}
### 输出目录
├── dist
│ └── index.js
index.js
(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["anaylaze"] = factory();
else
root["anaylaze"] = factory();
})(this, function() {
return (function(modules) {
...Launch
})
([
...Modules
]);
});
Launch
var installedModules = {};
function __webpack_require__(moduleId) {
if(installedModules[moduleId])
return installedModules[moduleId].exports;
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
module.l = true;
return module.exports;
}(__webpack_modules__)
__webpack_require__.m = modules;
__webpack_require__.c = installedModules;
__webpack_require__.i = function(value) { return value; };
__webpack_require__.d = function(exports, name, getter) {
if(!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
configurable: false,
enumerable: true,
get: getter
});
}
};
__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;
};
__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
__webpack_require__.p = "";
return __webpack_require__(__webpack_require__.s = 2);
Modules
[
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__a__ = __webpack_require__(1);
function b(){
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__a__["a"])();
console.log('b')
}
/* harmony default export */ __webpack_exports__["a"] = (b);
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony export b */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return a; });
function a (){
console.log('sss')
}
function b(){
console.log('ssssv')
}
// export default a
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__b__ = __webpack_require__(0);
function index (){
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */])();
console.log('index')
}
/* harmony default export */ __webpack_exports__["default"] = (index);
/***/ })
]
### webpackUniversalModuleDefinition
首先看webpackUniversalModuleDefinition这个function，因为我的打包方式是umd，所以这部分内容可能会输出的比较多，其实也就是兼容commonj的exports和AMD的defined，以及如果两种情况都不存在的时候的window的情况，没什么内容，这部分使用了自执行(IIFE)函数来初始化整个项目，这里需要注意，webpack打包后的文件是不存在’use strict’这个内容的，也是__千万不能有__,因为对于严格模式下面来说，自执行函数的this === undefined,否则才是this === window
### Launch
#### installedModules webpack很巧妙的用了缓存，使得我们如果多次加载同一个模块的时候，能够直接使用内存内部的内容，而不至于再重新去require一次，这个installedModules就是缓存池
### __webpack_require__
__webpack_require__相当于webpack自制的一个加载器，通过这个加载器，webpack可以按照自定义的前后顺序来决定依赖关系来实现加载，其中最主要的内容是这句
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
通过call获取对应moduleId的exports内容
剩下的__webpack_require__.*就是只是给加载器富裕特定的属性，最后的
__webpack_require__(__webpack_require__.s = 2);
告诉我们初始化的模块是moduleId=2的模块，通过分析Modules（下文会提出）我们不难发现，webpack把所有的依赖前置，将最后的引用放在了最后一个module,所以最后一个永远是启动函数，及module[module.length - 1]是启动函数
### Module
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__b__ = __webpack_require__(0);
function index (){
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */])();
console.log('index')
}
/* harmony default export */ __webpack_exports__["default"] = (index);
/***/ })
启动函数在这里，通过moduleId找到对应的额引用的模块，并且加入上下文进行使用,(__webpack_require__(0)),被依赖的元素，在前置，是一个正常的babel编译后的内容
"use strict";
/* unused harmony export b */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return a; });
function a (){
console.log('sss')
}
function b(){
console.log('ssssv')
}
这里需要注意的是，我在本地使用的是webpack2,webpack2在这里做了一个小手脚，也就是，我在a.js文件中export {a,b},但是因为我之引用了a所以在这里，webpack进行export的手也只将a进行了export
### 总结
从上面的文件可以看出，webpack的操作就是，在进行umd打包的时候，检测了当前的加载方式，暴露对应的入口，紧接着自制了一个require模块，通过把所有依赖和最后的启动函数放在一个数组内部并进行标号，使得能够随时随地的通过编号来进行依赖引用，自执行(IIFE)函数使得这一切都能够在初始化的时候完成.
