深入理解webpack打包机制(三)

有了依赖关系和解析后的源码后，就可以进行打包操作了。但是，还缺少一样东西，模版。模版是webpack中很重要的一环，它根据模块间的依赖关系生成不同参数，注意 是参数。这样说还是蛮抽象的，可以看一下真正的webpack打包后的bundle.js文件长啥样儿：bundle.js:// (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] = {// i: moduleId,// l: false,// exports: {}// };//// // Execute the module function// modules[moduleId].call(module.exports, module, module.exports, webpack_require);//// // Flag the module as loaded// module.l = 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;//// // define getter function for harmony exports// webpack_require.d = function(exports, name, getter) {// if(!webpack_require.o(exports, name)) {// Object.defineProperty(exports, name, { enumerable: true, get: getter });// }// };//// // define __esModule on exports// webpack_require.r = function(exports) {// if(typeof Symbol !== ‘undefined’ && Symbol.toStringTag) {// Object.defineProperty(exports, Symbol.toStringTag, { value: ‘Module’ });// }// Object.defineProperty(exports, ‘esModule’, { value: true });// };//// // create a fake namespace object// // mode & 1: value is a module id, require it// // mode & 2: merge all properties of value into the ns// // mode & 4: return value when already ns object// // mode & 8|1: behave like require// webpack_require.t = function(value, mode) {// if(mode & 1) value = webpack_require(value);// if(mode & 8) return value;// if((mode & 4) && typeof value === ‘object’ && value && value.__esModule) return value;// var ns = Object.create(null);// webpack_require.r(ns);// Object.defineProperty(ns, ‘default’, { enumerable: true, value: value });// if(mode & 2 && typeof value != ‘string’) for(var key in value) webpack_require.d(ns, key, function(key) { return value[key]; }.bind(null, key));// return ns;// };//// // getDefaultExport function for compatibility with non-harmony modules// webpack_require.n = function(module) {// var getter = module && module.__esModule ?// function getDefault() { return module[‘default’]; } :// function getModuleExports() { return module; };// webpack_require.d(getter, ‘a’, getter);// return getter;// };//// // Object.prototype.hasOwnProperty.call// webpack_require.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };//// // webpack_public_path// webpack_require.p = “”;////// // Load entry module and return exports// return webpack_require(webpack_require.s = “./src/index.js”);// })//// ({// “./src/a.js”:/!!\ ! ./src/a.js ! *//! no static exports found /// (function(module, exports, webpack_require) {eval("\nlet b = webpack_require(/! ./b / "./src/b.js");\n\nconsole.log(‘a.js’);\nconsole.log(b);\n\n//# sourceURL=webpack:///./src/a.js?");// }),// “./src/b.js”:/!!\ ! ./src/b.js ! **//! no static exports found /// (function(module, exports) {eval(" module.exports = ‘b.js’\n\n//# sourceURL=webpack:///./src/b.js?");// }),// “./src/index.js”:/!!\ ! ./src/index.js ! *//! no static exports found /// (function(module, exports, webpack_require) {eval(“console.log(‘index.js’);\n\n__webpack_require(/! ./a / "./src/a.js");\n\n//# sourceURL=webpack:///./src/index.js?”);// })/****/ });这一坨是啥？很乱对吧，把注释和一些无关紧要的代码去掉呢？长这样： (function(modules) { var installedModules = {}; function webpack_require(moduleId) { if(installedModules[moduleId]) { return installedModules[moduleId].exports; } var module = installedModules[moduleId] = { i: moduleId, l: false, exports: {} }; modules[moduleId].call(module.exports, module, module.exports, webpack_require); module.l = true; return module.exports; } return webpack_require(webpack_require.s = “./src/index.js”); }) ({ “./src/a.js”: (function(module, exports, webpack_require) {eval("\nlet b = webpack_require(/! ./b / "./src/b.js");\n\nconsole.log(‘a.js’);\nconsole.log(b);\n\n//# sourceURL=webpack:///./src/a.js?"); }), “./src/b.js”: (function(module, exports) {eval(" module.exports = ‘b.js’\n\n//# sourceURL=webpack:///./src/b.js?"); }), “./src/index.js”: (function(module, exports, webpack_require) {eval(“console.log(‘index.js’);\n\n__webpack_require__(/! ./a */ "./src/a.js");\n\n//# sourceURL=webpack:///./src/index.js?”); }) });注意最后一段，是不是和我们生成的this.modules对象的依赖关系很像？其实整个打包后的内容就是一个webpack的自执行函数，下面括号中那一坨就是该函数的参数。不过这个参数是key,value的形式，也就是依赖路径和解析后的源码的形式。未完待续…