// The require function //通过数字标识的moduleId 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 { //创建script表情,请求js文件 // 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 + "js/register/" + ({"0":"index","1":"path1","2":"path2"}[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__ //配置文件中定义的publicPath,build完后加载文件的路径 __webpack_require__.p = "/static/taxi-driver/"; })
在最后输出的index.html文件中首先加载的是这个common.js文件,然后是入口文件index.js。因为这个实例代码里面没有很多共用文件,因此webpack自己提供的commonChunkPlugin这个插件并没有起到作用，本来作为共用文件的xRoute.js因此也被打包进入了index.js.
webpackJsonp([0, 3], [ /* 0 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; __webpack_require__(1); __webpack_require__(8); /***/ }, /* 1 */ /* 2 */ /* 3 */ //.... /* 8 */ ])
index.js文件在common.js后加载,加载完后即开始执行.大家还记得webpackJsonp这个全局函数里面的倒数3行代码吧。就是用以调用这里:
/* 0 */ function(module, exports, __webpack_require__) { 'use strict'; __webpack_require__(1); __webpack_require__(8); }
其中模块Id为1和8的内容请查看相应文件, 其中模块1为我定义的路由文件,在执行模块1的代码前，会加载模块2的内容,模块2的内容为我定义的路由库。
接下来就看下模块1中路由定义的具体内容：
/* 1 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); //加载路由库 var _index = __webpack_require__(2); //实例化一个路由 var Router = new _index.Route(); //定义好的路由规则 Router.home('path1').addRoute({ path: 'path1', viewBox: '.public-container', //模板文件,为模块4 template: __webpack_require__(4), pageInit: function pageInit() { //这个方法是在common.js中__webpack_require__的静态方法,用来异步加载js。 //异步加载js的文件（即chunk）用来数字来标识，chunk的顺序从0开始. //这里path1.js的chunk num为1,大家可以回过头到common.js的__webpack_require__.e方法里面看看,里面已经做好了chunk num和模块文件的映射, chunk 1对应的模块文件为path1.js,chunk 2对用的模块文件为path2.js //__webpack_require__.e()接收的第二个参数为异步加载模块后的回调. 当path1.js被加载完后,在modules里面进行了缓存.这时就可以通过模块id去获取这个模块。然后进行初始化等后续的操作 __webpack_require__.e/* nsure */(1, function () { var controller = __webpack_require__(6); Router.registerCtrl('path1', new controller('.public-container')); }); } }).addRoute({ path: 'path2', viewBox: '.public-container', //模板文件,为模块5 template: __webpack_require__(5), pageInit: function pageInit() { __webpack_require__.e/* nsure */(2, function () { var controller = __webpack_require__(7); Router.registerCtrl('path2', new controller('.public-container')); }); } }); Router.bootstrap(); exports.default = Router; /***/ },