（四）es6 modules 和 CommonJs 对比

不同点

1. 解决模块之间的依赖的时间不同

es6模块: 解决模块之间的依赖发生在代码的编译阶段 （静态）在编译阶段就可以分析出模块之间的依赖关系

CommonJs: 解决模块之间的依赖发生在代码的运行阶段 （动态）

es6 的好处：

（1）在编译的时候，可以发现哪些模块是冗余的，可以打包的时候去掉这些模块，减小打包时候的体积

（2）有助于模块变量类型检查

2. 对于值是否可更改

CommonJs: 

可更改

es6 modules:

不可更改（会报错）

3. 目前主流的包管理器有两个：npm 和 yarn 

4. npm包与webpack

我们在项目中引入某个包， 比如：

import lodash from 'lodash'

webpack 打包时会去node_modules 里面找 lodash

那么webpack 具体去找 lodash 里面哪个文件呢~

每一个 npm 包都有一个入口文件，这个入口文件在 包内部package.json 中 main.js 文件中~

以axios为例：

5. 模块打包原理

webpack 为每一个模块创造了一个 可以导出和导入模块的环境，但本质上并没有修改代码的执行逻辑，因此代码的执行顺序和模块加载的顺序是完全一致的，这就是 webpack 打包的奥秘。