简要分析webpack打包后代码

原文地址：https://www.jianshu.com/p/0e5247f9975f

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__); /******/ };