開門見山
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__);
/******/ };