/**
* 這是webpack打包的編譯結果的原理，首先一個立即執行函數，這樣使得調用js後立即執行
*/
(function (modules) {
// 使用一個對象來緩存所有的模塊，這樣使的不會重複導入模塊
var storeResult = {};
function __webpack_require(modulePath) {
// 如果緩存裏面導入過該模塊，那麼不需要在重新導入模塊,返回改模塊導出的結果
if (storeResult[modulePath]) {
return storeResult[modulePath];
}
// 獲取執行的結果函數
var func = modules[modulePath];
var module = {
exports: {}
}
// 執行函數獲取結果
func(module, module.exports, __webpack_require);
var moduleResult = module.exports; // 獲取模塊導出的結果
storeResult[modulePath] = moduleResult;
return moduleResult;
}
// 運行'./src/index.js' 這個函數，所有使用一個函數來運行
return __webpack_require('./src/index.js')
})({
// 採用回調參數的形式傳遞所有的模塊，所有的模塊以路徑作爲key,value是一個函數，來執行所有模塊裏面的東西
'./src/index.js': function (module, exports, __webpack_require) {
// var b = __webpack_require('./src/b.js')
// console.log(b);
// 使用eval的作用是爲了適應js的虛擬引擎，然後通過瀏覽器可以認識的錨點，來定位打包後錯誤的位置 //# sourceURL=webpack:///./src/index.js?
eval(" var b = __webpack_require('./src/b.js');\n console.log(b);//# sourceURL=webpack:///./src/index.js?")
},
'./src/a.js': function (module, exports, __webpack_require) {
// console.log("this is a module");
// module.exports = "a";
eval("console.log(\"this is a module\");\n module.exports = \"a\";//# sourceURL=webpack:///./src/a.js?")
},
'./src/b.js': function (module, exports, __webpack_require) {
// var a = __webpack_require("./src/a.js");
// console.log("this is b module");
// console.log(a);
// module.exports = "b";
eval("var a = __webpack_require(\"./src/a.js\");\nconsole.log(\"this is b module\");\nconsole.log(a);\n module.exports =\"b\";\n//# sourceURL=webpack:///./src/b.js?")
}
})
模塊化代碼如下圖：
結果和webpack得出的一樣，如下:
