简要分析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__);
/******/ };
简要分析webpack打包后代码的更多相关文章
- 分析 webpack 打包后的代码
写在前面的:使用的 webpack 版本 3.0.0 一.开始 1. 准备 当前只创建一个文件 index.js,该文件作为入口文件,代码如下. console.log('hello, world') ...
- 为何webpack打包后的文件要放在服务器上才能运行
为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览 ...
- 前端项目模块化的实践2：使用 Webpack 打包基础设施代码
以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...
- 性能优化 - 查看 webpack 打包后所有的依赖关系（webpack 可视化工具）
查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看 ...
- vue 使用webpack打包后路径报错以及 alias 的使用
一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
- webpack打包后的文件
用了webpack打包工具,你是不是有时会疑惑,写了一个很简单的函数,结果生成那么多东西,而且还没有问题?下面,我从三种情况来分析打包后的入口文件,帮助自己理解webpack打包,也为平时定位产出目录 ...
- webpack打包后访问不到json文件
一.问题描述 在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败. 二.预期结 ...
- WebPack打包后如何调试
作为一个程序员每天的大部分工作就是调试自己写的程序,那我们使用了webpack后,所以代码都打包到了一起,给调试带来了麻烦,但是webpack已经为我们充分考虑好了这点,它支持生产Source Map ...
随机推荐
- Java环境变量
很简单的问题!配置Java环境变量 准备 下载安装Java,官方地址 打开系统环境变量,我的电脑右键 JAVA_HOME 添加JAVA_HOME,设置jdk安装目录,比如"C:\Progra ...
- Android随笔之——Android广播机制Broadcast详解
在Android中,有一些操作完成以后,会发送广播,比如说发出一条短信,或打出一个电话,如果某个程序接收了这个广播,就会做相应的处理.这个广播跟我们传统意义中的电台广播有些相似之处.之所以叫做广播,就 ...
- 谈谈JIT编译器和本机影像生成器（NGen.exe）
前言 在看<CLR>的时候,作者在开篇的时候提到了NGen.exe,前面一节执行程序集的代码中提到:程序或方法执行前会执行MSCorEE.dll中的JIT函数把要执行方法的IL转换成本地的 ...
- npm上传自己的项目
npm安装就不介绍了,自行度娘.本文介绍npm上传 先初始化:npm init 根据提示填完系统介绍信息(package.json): 再登录npmjs: npm login 效果如图: 输入注册的用 ...
- Netty介绍
Netty是由JBOSS开发的高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输等协议的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Li ...
- 【Java心得总结六】Java容器中——Collection
在[Java心得总结五]Java容器上——容器初探这篇博文中,我对Java容器类库从一个整体的偏向于宏观的角度初步认识了Java容器类库.而在这篇博文中,我想着重对容器类库中的Collection容器 ...
- 重温Servlet学习笔记--Cookie对象
首先要了解cookie必须得先了解http协议,,Cookie是http协议指定的,先由服务器保存cookie到浏览器,在下次浏览器请求服务器时把上次请求得到的cookie归还给服务器,cookie以 ...
- 软件工程-构建之法 WordCount小程序 统计文件中字符串个数，单词个数，词频，行数
一.前言 在之前写过一个词频统计的C语言课设,别人说你一个大三的怎么写C语言课程,我只想说我是先学习VB,VB是我编程语言的开始,然后接触到C语言及C++:再后来我是学习C++,然后反过来学习C语言, ...
- 【字符编码】Java字符编码详细解答及问题探讨
一.前言 继上一篇写完字节编码内容后,现在分析在Java中各字符编码的问题,并且由这个问题,也引出了一个更有意思的问题,笔者也还没有找到这个问题的答案.也希望各位园友指点指点. 二.Java字符编码 ...
- 3.Struts2配置文件标签介绍
Struts2的很多核心功能都是由拦截器实现的. struts-default.xml中定义了这些拦截器与Result类型. 所以,不继承struts-default包,Struts2提供的很多核心功 ...