簡要分析webpack打包後代碼

開門見山

1.打包單一模塊

webpack.config.js

module.exports = {
    entry:"./chunk1.js",
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'
    },
};

chunk1.js

var chunk1=1;
exports.chunk1=chunk1;

打包後，main.js(webpack生成的一些註釋已經去掉)

(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] = {
            exports: {},
            id: moduleId,
            loaded: false
        };
        // Execute the module function
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // Flag the module as loaded
        module.loaded = 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;
    // __webpack_public_path__
    __webpack_require__.p = "";
    // Load entry module and return exports
    return __webpack_require__(0);
 })([function(module, exports) {
    var chunk1=1;
    exports.chunk1=chunk1;
}]);

這其實就是一個當即執行函數，簡化一下就是：

(function(module){})([function(){},function(){}]);

OK,看一下自運行的匿名函數裏面幹了什麼：

function(modules) { // webpackBootstrap
    // modules就是一個數組，元素就是一個個函數體，就是咱們聲明的模塊
    var installedModules = {};
    // The require function
    function __webpack_require__(moduleId) {
        ...
    }
    // expose the modules object (__webpack_modules__)
    __webpack_require__.m = modules;
    // expose the module cache
    __webpack_require__.c = installedModules;
    // __webpack_public_path__
    __webpack_require__.p = "";
    // Load entry module and return exports
    return __webpack_require__(0);
 }

整個函數裏就聲明瞭一個變量installedModules 和函數__webpack_require__，並在函數上添加了一個m,c,p屬性，m屬性保存的是傳入的模塊數組，c屬性保存的是installedModules變量，P是一個空字符串。最後執行__webpack_require__函數，參數爲零，並將其執行結果返回。下面看一下__webpack_require__幹了什麼：

function __webpack_require__(moduleId) {
        //moduleId就是調用是傳入的0
        // installedModules[0]是undefined,繼續往下
        if(installedModules[moduleId])
            return installedModules[moduleId].exports;
        // module就是{exports: {},id: 0,loaded: false}
        var module = installedModules[moduleId] = {
            exports: {},
            id: moduleId,
            loaded: false
        };
        // 下面接着分析這個
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // 代表模塊已經載入
        module.loaded = true;
        // 返回module.exports(注意modules[moduleId].call的時候module.exports會被修改)
        return module.exports;
    }

接着看一下modules[moduleId].call(module.exports, module, module.exports, webpack_require)，其實就是

modules[moduleId].call({}, module, module.exports, __webpack_require__)

對call不瞭解固然也能夠認爲是這樣(可是並非等價，call能確保當模塊中使用this的時候，this是指向module.exports的)：

function  a(module, exports) {
    var chunk1=1;
    exports.chunk1=chunk1;
}
a(module, exports,__webpack_require__);

傳入的module就是{exports: {},id: 0,loaded: false}，exports就是{}，__webpack_require__就是聲明的__webpack_require__函數(傳入這個函數有什麼用呢，第二節將會介紹)；
運行後module.exports就是{chunk1:1}。因此當咱們使用chunk1這個模塊的時候（好比var chunk1=require("chunk1"),獲得的就是一個對象{chunk1:1}）。若是模塊裏沒有exports.chunk1=chunk1或者module.exports=chunk1獲得的就是一個空對象{}

2.使用模塊

上面咱們已經分析了webpack是怎麼打包一個模塊的（入口文件就是一個模塊），如今咱們來看一下使用一個模塊，而後使用模塊的文件做爲入口文件
webpack.config.js

module.exports = {
    entry:"./main.js",
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'
    }
};

main.js

var chunk1=require("./chunk1");
console.log(chunk1);

打包後

(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] = {
            exports: {},
            id: moduleId,
            loaded: false
        };
        // Execute the module function
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // Flag the module as loaded
        module.loaded = 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;
    // __webpack_public_path__
    __webpack_require__.p = "";
    // Load entry module and return exports
    return __webpack_require__(0);
})([function (module, exports, __webpack_require__) {
    var chunk1=__webpack_require__(1);
    console.log(chunk1);
}, function (module, exports) {
    var chunk1 = 1;
    exports.chunk1 = chunk1;
}]);

不同的地方就是自執行函數的參數由

[function(module, exports) { var chunk1=1; exports.chunk1=chunk1;}]

變爲

[function (module, exports, __webpack_require__) {
    var chunk1=__webpack_require__(1);
    console.log(chunk1);
}, function (module, exports) {
    var chunk1 = 1;
    exports.chunk1 = chunk1;
}]

其實就是多了一個main模塊，不過這個模塊沒有導出項，並且這個模塊依賴於chunk1模塊。因此當運行__webpack_require__(0)的時候，main模塊緩存到installedModules[0]上，modules[0].call(也就是調用main模塊)的時候，chunk1被緩存到installedModules[1]上，而且導出對象{chunk1：1}給模塊main使用

3.重複使用模塊

webpack.config.js

module.exports = {
    entry:"./main.js",
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'
    }
};

main.js

var chunk1=require("./chunk1");
var chunk2=require(".chunlk2");
console.log(chunk1);
console.log(chunk2);

chunk1.js

var chunk2=require("./chunk2");
var chunk1=1;
exports.chunk1=chunk1;

chunk2.js

var chunk2=1;
exports.chunk2=chunk2;

打包後

(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] = {
            exports: {},
            id: moduleId,
            loaded: false
        };
        // Execute the module function
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // Flag the module as loaded
        module.loaded = 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;
    // __webpack_public_path__
    __webpack_require__.p = "";
    // Load entry module and return exports
    return __webpack_require__(0);
})([function (module, exports, __webpack_require__) {

    var chunk1 = __webpack_require__(1);
    var chunk2 = __webpack_require__(2);
    console.log(chunk1);
    console.log(chunk2);
}, function (module, exports, __webpack_require__) {

    __webpack_require__(2);
    var chunk1 = 1;
    exports.chunk1 = chunk1;
}, function (module, exports) {

    var chunk2 = 1;
    exports.chunk2 = chunk2;
}]);

不難發現，當須要重複使用模塊的時候，緩存變量installedModules 就起做用了

4.多個打包入口

無論是單一模塊仍是重複模塊，和以上兩種同樣

5.入口參數爲數組

webpack.config.js

module.exports = {
    entry:['./main.js','./main1.js'],
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'
    }
};

打包後

[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
    __webpack_require__(1);
    module.exports = __webpack_require__(3);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
    var chunk1=__webpack_require__(2);
    console.log(chunk1);
/***/ },
/* 2 */
/***/ function(module, exports) {
    var chunk1=1;
    exports.chunk1=chunk1;
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
    var chunk1=__webpack_require__(2);
/***/ }
/******/ ]

這裏只截取自執行匿名函數的參數，由於其餘代碼與以前同樣。能夠看到1就是main默模塊，2就是chunk1模塊，3就是mian1模塊，0的做用就是運行模塊mian,mian1,而後將main1模塊導出（main1中沒有導出項，因此到導出{}），總結一下：入口參數是字符串無論是多入口仍是單入口，最後都會將入口模塊的導出項導出,沒有導出項就導出{}，而入口參數是數組，就會將最後一個模塊導出（webpackg官網有說明）

6.使用CommonsChunkPlugin插件

webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        main: './main.js',
        main1: './main1.js',
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'
    },
    plugins: [
        new CommonsChunkPlugin({
        name: "common"
        })
    ]
};

main mian1中都require了chunk1,因此chunk1會被打包到common。
打包後，common.js

(function (modules) { // webpackBootstrap
    // install a JSONP callback for chunk loading
    var parentJsonpFunction = window["webpackJsonp"];
    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
        // add "moreModules" to the modules object,
        // then flag all "chunkIds" as loaded and fire callback
        var moduleId, chunkId, i = 0, callbacks = [];
        for (; i < chunkIds.length; i++) {
            chunkId = chunkIds[i];
            if (installedChunks[chunkId])
                callbacks.push.apply(callbacks, installedChunks[chunkId]);
            installedChunks[chunkId] = 0;
        }
        for (moduleId in moreModules) {
            modules[moduleId] = moreModules[moduleId];
        }
        if (parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
        while (callbacks.length)
            callbacks.shift().call(null, __webpack_require__);
        if (moreModules[0]) {
            installedModules[0] = 0;
            return __webpack_require__(0);
        }
    };
    // The module cache
    var installedModules = {};
    // object to store loaded and loading chunks
    // "0" means "already loaded"
    // Array means "loading", array contains callbacks
    var installedChunks = {
        2: 0
    };
    // 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] = {
            exports: {},
            id: moduleId,
            loaded: false
        };
        // Execute the module function
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // Flag the module as loaded
        module.loaded = true;
        // Return the exports of the module
        return module.exports;
    }
    // This file contains only the entry chunk.
    // The chunk loading function for additional chunks
    __webpack_require__.e = function requireEnsure(chunkId, callback) {
        // "0" is the signal for "already loaded"
        if (installedChunks[chunkId] === 0)
            return callback.call(null, __webpack_require__);
        // an array means "currently loading".
        if (installedChunks[chunkId] !== undefined) {
            installedChunks[chunkId].push(callback);
        } else {
            // start chunk loading
            installedChunks[chunkId] = [callback];
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.charset = 'utf-8';
            script.async = true;
            script.src = __webpack_require__.p + "" + chunkId + "." + ({ "0": "main", "1": "main1" }[chunkId] || chunkId) + ".js";
            head.appendChild(script);
        }
    };
    // expose the modules object (__webpack_modules__)
    __webpack_require__.m = modules;
    // expose the module cache
    __webpack_require__.c = installedModules;
    // __webpack_public_path__
    __webpack_require__.p = "";
})([, function (module, exports) {

    var chunk1 = 1;
    exports.chunk1 = chunk1;

}]);

main.js

webpackJsonp([0],[function(module, exports, __webpack_require__) {

    var chunk1=__webpack_require__(1);
    console.log(chunk1);
 }]);

main1.js

webpackJsonp([1],[function(module, exports, __webpack_require__) {
    var chunk1=__webpack_require__(1);
    console.log(chunk1);
}]);

與以前相比，多了webpackJsonp函數，當即執行的匿名函數沒有當即調用__webpack_require__(0)。看一下webpackJsonp：

var parentJsonpFunction = window["webpackJsonp"];
    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
        //moreModules爲獨立chunk代碼，chunkIds標記獨立chunk惟一性避免按需加載時重複加載
        //以main.js中代碼爲例，chunkIds爲[0],moreModules爲
        //[function(module, exports, __webpack_require__) {
        //  var chunk1=__webpack_require__(1);
        //  console.log(chunk1);
        //}]
        var moduleId, chunkId, i = 0, callbacks = [];
        for (; i < chunkIds.length; i++) {
            chunkId = chunkIds[i];//chunkId=0
            if (installedChunks[chunkId])
                callbacks.push.apply(callbacks,installedChunks[chunkId]);//0 push入callbacks(使用requireEnsure再也不是0)
            //賦值爲0代表chunk已經loaded
            installedChunks[chunkId] = 0;
        }
        for (moduleId in moreModules) {
            //modules[0]會被覆蓋
            modules[moduleId] = moreModules[moduleId];
        }
        //按當前狀況parentJsonpFunction一直未undefined
        if (parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
        //按當前狀況callbacks=[]
        while (callbacks.length)
            callbacks.shift().call(null, __webpack_require__);
        if (moreModules[0]) {
            installedModules[0] = 0;
            return __webpack_require__(0);
        }
    };
    // 緩存模塊，經過閉包引用(window["webpackJsonp"]能夠訪問到)
    var installedModules = {};
    //2爲公共chunck惟一ID，0表示已經loaded
    var installedChunks = {
        2: 0
    };
    // 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] = {
            exports: {},
            id: moduleId,
            loaded: false
        };
        // Execute the module function
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // Flag the module as loaded
        module.loaded = true;
        // Return the exports of the module
        return module.exports;
    }
    //按需加載
    __webpack_require__.e = function requireEnsure(chunkId, callback) {
        // "0" is the signal for "already loaded"
        if (installedChunks[chunkId] === 0)
            return callback.call(null, __webpack_require__);
        // an array means "currently loading".
        if (installedChunks[chunkId] !== undefined) {
            installedChunks[chunkId].push(callback);
        } else {
            // start chunk loading
            installedChunks[chunkId] = [callback];
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.charset = 'utf-8';
            script.async = true;
            script.src = __webpack_require__.p + "" + chunkId + "." + ({ "0": "main", "1": "main1" }[chunkId] || chunkId) + ".js";
            head.appendChild(script);
        }
    };

好像看不出什麼。。。，修改一下
webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        main: './main.js',
        main1: './main1.js',
        chunk1:["./chunk1"]
    },
    output: {
        path: __dirname + '/dist2',
        filename: '[name].js'
    },
    plugins: [
        new CommonsChunkPlugin({
        name: ["chunk1"],
        filename:"common.js",
        minChunks:3,
        })
    ]
};

main,main1都分別require chunk1,chunk2,而後將chunk1打包到公共模塊（minChunks:3，chunk2不會被打包到公共模塊）。自運行匿名函數最後多了

return __webpack_require__(0);

則installedModules[0]爲已經loaded,看common.js，installedModules[1]也會loaded。
main.js

webpackJsonp([1], [function (module, exports, __webpack_require__) {

    var chunk1 = __webpack_require__(1);
    var chunk2 = __webpack_require__(2);
    exports.a = 1;
    console.log(chunk1);
}, , function (module, exports) {
    var chunk2 = 1;
    exports.chunk2 = chunk2;

}
]);

main1.js

webpackJsonp([2], [function (module, exports, __webpack_require__) {

    var chunk1 = __webpack_require__(1);
    var chunk2 = __webpack_require__(2);
    exports.a = 1;
    console.log(chunk1);
}, , function (module, exports) {
    var chunk2 = 1;
    exports.chunk2 = chunk2;
}
]);

common.js modules：

[function (module, exports, __webpack_require__) {

    module.exports = __webpack_require__(1);
}, function (module, exports) {

    var chunk1 = 1;
    exports.chunk1 = chunk1;
}]

以main.js的代碼爲例，調用webpackJsonp，傳入的參數chunkIds爲[1],moreModules爲

[function (module, exports, __webpack_require__) {

    var chunk1 = __webpack_require__(1);
    var chunk2 = __webpack_require__(2);
    exports.a = 1;
    console.log(chunk1);
}, , function (module, exports) {
    var chunk2 = 1;
    exports.chunk2 = chunk2;

}]

var moduleId, chunkId, i = 0, callbacks = [];
        for (; i < chunkIds.length; i++) {
            chunkId = chunkIds[i];//1
            //false,賦值爲0後仍是false
            if (installedChunks[chunkId])
                callbacks.push.apply(callbacks, installedChunks[chunkId]);
            installedChunks[chunkId] = 0;
        }
        //三個模塊
        for (moduleId in moreModules) {
            //moduleId:0,1,2  moreModules[1]爲空模塊，自執行函數的參數(公共模塊)會被覆蓋，可是參數中的相應模塊已經loaded而且緩存
            modules[moduleId] = moreModules[moduleId];
        }
        if (parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
        while (callbacks.length)
            callbacks.shift().call(null, __webpack_require__);
        if (moreModules[0]) {
            //installedModules[0]會從新load,可是load的是moreModules[0]，由於modules[0]已經被覆蓋，moreModules[0]依賴於
            //modules[1]、modules[2],modules[1]已經loaded
            installedModules[0] = 0;
            return __webpack_require__(0);
        }

再看下面的狀況：
common.js 自執行函數參數（公共模塊）（沒有return webpack_require(0)）

[,function(module, exports, __webpack_require__) {

    var chunk1=1;
    var chunk2=__webpack_require__(2);
    exports.chunk1=chunk1;
},function(module, exports) {

    var chunk2=1;
    exports.chunk2=chunk2;
}]

main.js

webpackJsonp([0],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    var chunk1=__webpack_require__(1);
    var chunk2=__webpack_require__(2);
    exports.a=1;
    console.log(chunk1);
    //main
/***/ }
]);

以main調用分析

var moduleId, chunkId, i = 0, callbacks = [];
        for(;i < chunkIds.length; i++) {
            chunkId = chunkIds[i];//0
            if(installedChunks[chunkId])
                callbacks.push.apply(callbacks, installedChunks[chunkId]);
            installedChunks[chunkId] = 0;//代表惟一索引爲0的chunk已經loaded
        }
        for(moduleId in moreModules) {
            //moreModules只有一個元素，因此modules[1]、modules[2]不會被覆蓋
            modules[moduleId] = moreModules[moduleId];
        }
        if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
        while(callbacks.length)
            callbacks.shift().call(null, __webpack_require__);
        if(moreModules[0]) {
            installedModules[0] = 0;
            //moreModules[0]即modules[0]依賴modules[1]、即modules[2](沒有被覆蓋很關鍵)
            return __webpack_require__(0);
        }

還有這種打包狀況：
common.js不包含公共模塊，即自執行函數參數爲[]。
main.js

webpackJsonp([0,1],[
function(module, exports, __webpack_require__) {

    var chunk1=__webpack_require__(1);
    var chunk2=__webpack_require__(2);
    exports.a=1;
    console.log(chunk1);
},function(module, exports) {
    var chunk1=1;
    exports.chunk1=chunk1;
},function(module, exports) {
    var chunk2=1;
    exports.chunk2=chunk2;
}]);

以main調用分析

var moduleId, chunkId, i = 0, callbacks = [];
        for(;i < chunkIds.length; i++) {
            chunkId = chunkIds[i];//0,1
            if(installedChunks[chunkId])
                callbacks.push.apply(callbacks, installedChunks[chunkId]);
            installedChunks[chunkId] = 0;
        }
        for(moduleId in moreModules) {
            //moreModules所有轉移到modules
            modules[moduleId] = moreModules[moduleId];
        }
        if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
        while(callbacks.length)
            callbacks.shift().call(null, __webpack_require__);
        if(moreModules[0]) {
            //modules[0]是chunk文件運行代碼
            installedModules[0] = 0;
            return __webpack_require__(0);
        }

7.按需加載

webpack.config.json

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

main.js

require.ensure(['./a'], function(require) {
  var content = require('./a');
  document.open();
  document.write('<h1>' + content + '</h1>');
  document.close();
});

a.js

module.exports = 'Hello World';

打包後

bundle.js

/******/ (function(modules) { // webpackBootstrap
/******/    // install a JSONP callback for chunk loading
/******/    var parentJsonpFunction = window["webpackJsonp"];
/******/    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, callbacks = [];
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId])
/******/                callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/            installedChunks[chunkId] = 0;
/******/        }
/******/        for(moduleId in moreModules) {
/******/            modules[moduleId] = moreModules[moduleId];
/******/        }
/******/        if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/        while(callbacks.length)
/******/            callbacks.shift().call(null, __webpack_require__);

/******/    };

/******/    // The module cache
/******/    var installedModules = {};

/******/    // object to store loaded and loading chunks
/******/    // "0" means "already loaded"
/******/    // Array means "loading", array contains callbacks
/******/    var installedChunks = {
/******/        0:0
/******/    };

/******/    // 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] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }

/******/    // This file contains only the entry chunk.
/******/    // The chunk loading function for additional chunks
/******/    __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/        // "0" is the signal for "already loaded"
/******/        if(installedChunks[chunkId] === 0)
/******/            return callback.call(null, __webpack_require__);

/******/        // an array means "currently loading".
/******/        if(installedChunks[chunkId] !== undefined) {
/******/            installedChunks[chunkId].push(callback);
/******/        } else {
/******/            // start chunk loading
/******/            installedChunks[chunkId] = [callback];
/******/            var head = document.getElementsByTagName('head')[0];
/******/            var script = document.createElement('script');
/******/            script.type = 'text/javascript';
/******/            script.charset = 'utf-8';
/******/            script.async = true;

/******/            script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
/******/            head.appendChild(script);
/******/        }
/******/    };

/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__.e/* nsure */(1, function(require) {
      var content = __webpack_require__(1);
      document.open();
      document.write('<h1>' + content + '</h1>');
      document.close();
    });


/***/ }
/******/ ]);

1.bundle.js

webpackJsonp([1],[
/* 0 */,
/* 1 */
/***/ function(module, exports) {

    module.exports = 'Hello World';


/***/ }
]);

和使用CommonsChunkPlugin打包的差別在於

/******/    // This file contains only the entry chunk.
/******/    // The chunk loading function for additional chunks
/******/    __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/        // "0" is the signal for "already loaded"
/******/        if(installedChunks[chunkId] === 0)
/******/            return callback.call(null, __webpack_require__);

/******/        // an array means "currently loading".
/******/        if(installedChunks[chunkId] !== undefined) {
/******/            installedChunks[chunkId].push(callback);
/******/        } else {
/******/            // start chunk loading
/******/            installedChunks[chunkId] = [callback];
/******/            var head = document.getElementsByTagName('head')[0];
/******/            var script = document.createElement('script');
/******/            script.type = 'text/javascript';
/******/            script.charset = 'utf-8';
/******/            script.async = true;

/******/            script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
/******/            head.appendChild(script);
/******/        }
/******/    };

模塊main的id爲0，模塊a的id爲1。return webpack_require(0)，則加載main模塊，
modules[0].call(module.exports, module, module.exports, webpack_require)則調用函數

function(module, exports, __webpack_require__) {

    __webpack_require__.e/* nsure */(1, function(require) {
      var content = __webpack_require__(1);
      document.open();
      document.write('<h1>' + content + '</h1>');
      document.close();
    }

/******/    // This file contains only the entry chunk.
/******/    // The chunk loading function for additional chunks
/******/    __webpack_require__.e = function requireEnsure(chunkId, callback) {
                //installedChunks[1]爲undefined
/******/        // "0" is the signal for "already loaded"
/******/        if(installedChunks[chunkId] === 0)
/******/            return callback.call(null, __webpack_require__);

/******/        // an array means "currently loading".
/******/        if(installedChunks[chunkId] !== undefined) {
/******/            installedChunks[chunkId].push(callback);
/******/        } else {
/******/            // start chunk loading
/******/            installedChunks[chunkId] = [callback];//installedChunks[1]爲數組，代表currently loading
/******/            var head = document.getElementsByTagName('head')[0];
/******/            var script = document.createElement('script');
/******/            script.type = 'text/javascript';
/******/            script.charset = 'utf-8';
/******/            script.async = true;

/******/            script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
/******/            head.appendChild(script);
                    //加載完後直接調用
                    /******/webpackJsonp([1],[
                    /******//* 0 */,
                    /******//* 1 */
                    /******//***/ function(module, exports) {
                    /******/
                    /******/    module.exports = 'Hello World';
                    /******/
                    /******/
                    /******//***/ }
                    /******/]);
                    /******/        }
                    /******/    };
                    //installedChunks[1]在webpackJsonp獲得調用

installedChunks[1]爲數組，元素爲main模塊的執行代碼

/******/    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
                //moreModules爲模塊a的代碼
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, callbacks = [];
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId])//installedChunks[0]==0,installedChunks[1]爲數組
/******/                callbacks.push.apply(callbacks, installedChunks[chunkId]);//callbacks爲模塊main執行代碼，不爲數組
/******/            installedChunks[chunkId] = 0;//installedChunks[1]不爲數組，代表已經加載
/******/        }
/******/        for(moduleId in moreModules) {
/******/            modules[moduleId] = moreModules[moduleId];
/******/        }
/******/        if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/        while(callbacks.length)
/******/            callbacks.shift().call(null, __webpack_require__);

/******/    };