webpack的模块化打包机制代码模拟&eval的作用

模块化代码思路

webpack的模块化打包机制

//通过这种巧妙的方式把模块合并在一起，没有污染任何变量
    (function (modules) {
      //用于缓存模块的导出结果
      var moduleExport = {
        // './src/a.js': "a" //模块id+模块导出结果
        i: moduleId,
        l: true,//判断是否加载完成
        exports: {}//模块导出结果
      }
      //相当于运行一个模块，得到一个模块的导出结果
      //之所以叫webpack_require是防止跟node的require函数冲突
      function webpack_require(moduleId) { //moduleId就是模块的路径
        //检查是否有缓存
        if (moduleExport[moduleId]) {
          return
        }
        var func = modules[moduleId]
        let moudle = {
          // './src/a.js': "a" //模块id+模块导出结果
          i: moduleId,
          l: false,//判断是否加载完成
          exports: {}//模块导出结果
        }
        func(moudle, modules.exports, webpack_require)
        var result = moudle.exports //下·得到模块的导出结果
        moudle.l = true
        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('module index.js')
        var a = webpack_require('./src/a.js')
        console.log(a)
      },
    }))

eval主要是把代码运行在不同的环境便于开发者调试（简易版source map），默认为虚拟机VM环境，sourceURL可以选择运行环境