Webpack编译结果分析

Webpack编译结果概括

为了防止全局变量污染，Webpack编译最终的结果是一个自执行函数，参数传递的是一个模块对象，包括路径Id和一个被函数包含的模块执行代码，这个函数传递三个参数，module，module.exports,__webpack_require。

自执行函数里面主要包括缓存(modulesExports)、__webpack_require(等同于require，webpack和require区分)、返回模块导出代码。

最好手写一个简易的webpack编译结果，便于理解

代码如下：

(function (modules) {
    var modulesExports = {}

    function __webpack_require(moduleId) {
        if (modulesExports[moduleId]) {
            return modulesExports[moduleId]
        }
        var func = modules[moduleId]
        var module = {
            exports: {}
        }
        func(module, module.exports, __webpack_require)
        var result = module.exports
        modulesExports[moduleId] = result
        return result
    }
    // 执行入口模块
    __webpack_require("./src/index.js")
})({
    // 该对象保存了所有的模块，以及模块对应的代码
    "./src/a.js": function (module, exports) {
        console.log("module a")
        module.exports = "a"
    },
    "./src/index.js": function (module, exports, __webpack_require) {
        console.log("index module")
        var a = __webpack_require("./src/a.js")
        console.log(a)
    }
})

 注解：模块执行代码我用的原始代码，正常开发环境下webpack打包结果使用eval包含执行代码，便于调试