#

# webpack 的 import 被打包成了什么

import moduleName from 'xxModule'和import('xxModule')经过webpack编译打包后最终变成了什么？在浏览器中是怎么运行的？

import 经过 webpack 打包以后变成一些 Map 对象 (_webpack_modules_)，key 为模块路径，value 为模块的可执行函数；
代码加载到浏览器以后从入口模块开始执行，其中执行的过程中，最重要的就是 webpack 定义的 _webpack_require_ 函数，负责实际的模块加载并执行这些模块内容，返回执行结果，其实就是读取 Map 对象，然后执行相应的函数；
当然其中的异步方法（import('xxModule')）比较特殊一些，它会单独打成一个包，采用动态加载的方式，

具体过程：当用户触发其加载的动作时，会动态的在 head 标签中创建一个 script 标签，然后发送一个 http 请求，加载模块，模块加载完成以后自动执行其中的代码，主要的工作有两个，更改缓存中模块的状态，另一个就是执行模块代码。

使用 Object.defineProperty:

1.原始值变了，import 加载的值也可以同步变化(利用闭包返回)

2.防止 import 导入的变量被修改