深入剖析 webpack 打包生成的一大堆代码到底是啥
1.为什么我们需要webpack
现代webapp开发自然离不开模块化的开发，现代mvvm框架，诸如angular, vue, react 让前端掀起了MVC的浪潮，所以，我们迫切的需要一个前端自动化构建的工具，用来做代码压缩，合并，打包等一系列的自动化的操作，在这之前比较流行的是grunt和gulp，自webpack初出头角之后，就收获了大量的关注。无疑，webpack将是前端自动化构建必不可少的工具。
2.正文
所以扯了这么多，webpack打包生成的一堆代码到底是啥。
首先来创建一个简单的demo
mkdir webapckTest进而使用npm初始化
cd webpackTestnpm init接下来等待完成就好了
接下来用npm安装一下webpack
npm install --save-dev webpack下面分有依赖和没有依赖进行打包后生成的代码进行分析
2.1情形一：没有任何依赖的源文件 （CommonJS）
创建一个main.js ，用webpack进行打包，现在整个目录除开packge.json和node_modules就只有main.js这一个文件内容如下：
function sayHello(){
console.log('hello');
}用webpack进行打包
webapck main.js main.bundle.jsls一下目录，看到目录下出现了一个打包好的文件 main.bundle.js
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ 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)
/******/ 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
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __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
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
function sayHello(){
console.log('hello');
}
/***/ })
/******/ ]);为了能正常工作起来，webpack为我们打包的包文件，除了我们自己声明的模块（webpack 把 main.js抽象为一个模块），还有打包过程中生成的一些代码。
所以这些代码到底是啥？？
先别急，慢慢来看
实际上打包过后生成的文件main.bundle.js也是一个模块，并且webpack默认为使用CommonJS模块规范（这点很重要，为什么很重要这里不深入追究，下面我们再谈）
现在我们来看一下上面打包的代码。
纵看上面打包文件生成的一大堆代码，实际上就是一个自执行函数
(function(modules) {
//...
})([function(module,exports){
function sayHello(){
console.log('hello');
}
}])这个自执行函数接收一个参数，这个参数是一个模块数组，这个数组里存放我们打包的入口模块，以及这个模块的依赖模块，在这里我们没有依赖模块。
下面进入自执行函数的函数体一探究竟
首先声明了一个模块缓存对象，整个缓存对象是用来缓存加载进来的模块，需要注意的是，加载进来的模块和加载完毕的模块是两个概念
// The module cache
/******/ var installedModules = {};紧接着声明了一个局部函数__webpack_require__，这个函数是用来做加载模块的
function __webpack_require__(moduleId) {
//...
}该函数接收一个moduleId为参数，这个moduleId从名字上也可以看出来，它是module的ID，那这个ID到底是什么呢？用webpack打包的时候，默认会出现以下信息（这里是上面打包main.js的信息）
最下面一行有打包文件的详细信息，在最开头有个 [0] ，这个就是打包模块的id了
下面我们接着看__webpack_require__的函数体
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)
/******/ 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
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }// Check if module is in cache
if(installedModules[moduleId]) {
return installedModules[moduleId].exports;
}进入函数时，会先检查该函数是否已经被缓存过了，也就是是否已经被加载了，这是为了防止重复打包而做的判断，进而保证每个模块只会被加载一次。
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};这里会创建一个module，这个module实际上也是一个对象，这个对象有三个属性：
i:moduleIdi是index的缩写，这里指代module的id
l:falsel是loaded的缩写，value是一个boolean值，指代是否已经加载，
下面这个exports是整个模块链中最重要的对象，对象的依赖都是通过这个exports字段来进行加载的
首先初始化的时候exports被赋值为了一个空对象
exports: {}接着，
开始执行传入进来的模块函数
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);这里用了call方法，是为了改变this的指向，然后传入三个参数去模块函数，因为Main.js没有任何依赖模块，因此，该模块函数没有第三个参数，__webpack_require__也不会被传入进去。
__webpack_require__执行到最后，改了一下l的值，变为true表示已经加载，然后把module.exports返回出去
// Flag the module as loaded
module.l = true;
// Return the exports of the module
return module.exports;整个__webpack_require__声明完之后，为__webpack_require__赋上了几个方法
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __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
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);首先是m(module)和c(cache)属性，分别被赋值为传入进来的模块数组，和在开头声明的模块缓存对象
// expose the modules object (__webpack_modules__)
__webpack_require__.m = modules;
// expose the module cache
__webpack_require__.c = installedModules;下面的d方法是更改了当前加载进来的模块的属性的属性配置
进入这个函数之前，判断了一下__webpack_require__上是否有o方法，这个判断主要是为了判断是否是入口模块，因为入口模块总是被第一个加载进来，而o方法在d方法后面才会被定义
// define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };紧接着来看一下n方法
这个方法是为了根据模块加载机制的不同做出不同的相应 （module.__esModule为es6模块加载机制）
// getDefaultExport function for compatibility with non-harmony modules
/******/ __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;
/******/ };下面是o方法的定义，o方法只是简单的包装了一下Object.prototype.hasOwnProperty
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
// __webpack_public_path__
/******/ __webpack_require__.p = "";然后整个自执行函数到这里就宣告执行完毕，这里传入的参数为0，返回了一个exports对象
// Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);但是对于没有依赖模块的模块来说，上面说的一大堆几乎都没有用，我们可以看看传进来的模块函数
(function(module, exports) {
function sayHello(){
console.log('hello');
}
/***/ })几乎没有什么改变，原封原样的被写在了这里。
如果我们在源文件里加上一句执行的话
sayHello();一样是没有什么变化
(function(module, exports) {
function sayHello(){
console.log('hello');
}
/***/ })看到这里大家可能一头雾水，但是毕竟webpack是用来进行模块打包的，只有一个模块，那webpack的作用就发挥不了了，下面来看一下第二种情形，有依赖模块的打包方式
2.2情形二：有依赖模块（commonJS）
情形二依然是用了CommonJS的加载规范
我们添加一个源文件为world.js
function world(){
console.log('world');
}
module.exports = world;然后在hello.js里加载进来
let world = require('./world');
function sayHello(){
console.log('hello')
}
world();正常运行起来会打印world
接下来我们用webpack进行打包
webpack main.js main.bundle.js打包完成后我们看一下打包过后的代码
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ 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)
/******/ 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
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __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
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
let world = __webpack_require__(1);
function sayHello(){
console.log('hello')
}
world();
// world.sayWorld();
/***/ }),
/* 1 */
/***/ (function(module, exports) {
function world(){
console.log('world');
}
module.exports = world;
/***/ })
/******/ ]);我们看到main模块函数里多了一句
let world = __webpack_require__(1);然后下面直接调用了world
world();可以猜出\ webpack_require(1)返回的就是world模块
我们可以console一下
console.log(__webpack_require__(1).toString());打印出
function world(){
console.log('world');
}我们往下看，看到我们的依赖模块world
module.exports = world;这里的module.exports 被赋值为world函数，但是，这里的module.exports和CommonJS的module.exports不一样，因为这里处在自执行函数里。还记得自执行函数里的一条语句吗？
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);没错，就是它了，这条语句把module，和module.exports当做参数传递了进去，因此，调用__webpack_require__(1)是会返回world函数的。这样我们能在main里使用它也不是没有道理。
既然webpack 用CommonJS加载的模块打包方式弄清楚了，那用es6规范写的模块是不是也是一样的呢？
实际上不是的，下面来看一下用es6模块的打包方式
2.3情形三：有依赖模块（es6）
介于上面讨论过无依赖模块的打包方式，这里只讨论有依赖模块的打包方式了。
我们稍微修改一下main.js 和 world.js
main.js
import { world } from './world'
function sayHello(){
console.log('hello')
}
world()world.js
function world(){
console.log('world')
}
export { world }之后用webpack进行打包
webpack main.js main.bundle.js得到一个main.bundle.js的打包文件
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ 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)
/******/ 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
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __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
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__world__ = __webpack_require__(1);
function sayHello(){
console.log('hello')
}
Object(__WEBPACK_IMPORTED_MODULE_0__world__["a" /* world */])()
// world.sayWorld();
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return world; });
function world(){
console.log('world')
}
/***/ })
/******/ ]);我们可以发现在入口模块里有点变化，首先是这三句
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__world__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__world___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__world__);
“use strict”使当前作用域变为了严格模式。
下面设置了一下对象的属性配置
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__world__ = __webpack_require__(1);
//...
/***/ }),defineProperty的第一个参数是从模块函数的第二个参数上拿过来的，我们看一下调用的地方，需要知道这个参数到底是什么
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);从这里我们可以知道__webpack_exports__就是在__webpack_require__里创建的一个module对象的exports属性，这里的意思是设置它的__esModule属性的值为true，表明它是一个es6模块。
下面一行就至关重要了
var __WEBPACK_IMPORTED_MODULE_0__world__ = __webpack_require__(1);它把__webpack_require__(1)返回的结果赋值给了__WEBPACK_IMPORTED_MODULE_0__world__变量。
__webpack_require__(1)返回的是什么呢？这个就要看world模块函数的定义
转到world的模块函数
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return world; });
function world(){
console.log('world')
}
/***/ })这里有一段语句
__webpack_require__.d(__webpack_exports__, "a", function() { return world; });这句是至关重要的，这句给__webpack_exports__的a属性赋值为world函数。
所以上面
__webpack_require__(1)的返回值就是一个module.exports对象，它是一个带有a属性的对象，这意味着我们可以通过
__WEBPACK_IMPORTED_MODULE_0__world__["a"]访问到world函数。
因此，它在下面写了这样一段
Object(__WEBPACK_IMPORTED_MODULE_0__world__["a" /* world */])()这里实际上就是调用了world函数
通过
Object(__WEBPACK_IMPORTED_MODULE_0__world__["a" /* world */])把拿到的world包装为一个object，然后后面加上()进行执行。
总结
webpack 是一个强大的打包工具，除此之外它还有一些值得称赞的功能，比如code spliting , loader , plugin 以及我们熟悉的模块热更新，它都能给我们的开发带来便利，打包为一个文件也能相应的减少对服务器的请求提高效率，这是毋容置疑的。