深入剖析 webpack 打包生成的一大堆代码到底是啥

1.为什么我们需要webpack

现代webapp开发自然离不开模块化的开发，现代mvvm框架，诸如angular, vue, react 让前端掀起了MVC的浪潮，所以，我们迫切的需要一个前端自动化构建的工具，用来做代码压缩，合并，打包等一系列的自动化的操作，在这之前比较流行的是grunt和gulp，自webpack初出头角之后，就收获了大量的关注。无疑，webpack将是前端自动化构建必不可少的工具。

2.正文

所以扯了这么多，webpack打包生成的一堆代码到底是啥。

首先来创建一个简单的demo

mkdir webapckTest

进而使用npm初始化

cd webpackTest

npm 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.js

ls一下目录，看到目录下出现了一个打包好的文件 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 cacheif(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:moduleId

i是index的缩写，这里指代module的id

l:false

l是loaded的缩写，value是一个boolean值，指代是否已经加载，

下面这个exports是整个模块链中最重要的对象，对象的依赖都是通过这个exports字段来进行加载的
首先初始化的时候exports被赋值为了一个空对象

exports: {}

接着，
开始执行传入进来的模块函数

// Execute the module functionmodules[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 loadedmodule.l = true;// Return the exports of the modulereturn 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 以及我们熟悉的模块热更新，它都能给我们的开发带来便利，打包为一个文件也能相应的减少对服务器的请求提高效率，这是毋容置疑的。