webpack之Scope Hoisting（范围提升）

Scope Hoisting（范围提升）

1. 什么是Scope Hoisting呢？
   1. Scope Hoisting从webpack3开始增加的一个新功能；
   2. 功能是对作用域进行提升，并且让webpack打包后的代码更小、运行更快；
2. 默认情况下webpack打包会有很多的函数作用域，包括一些（比如最外层的）IIFE：
   1. 无论是从最开始的代码运行，还是加载一个模块，都需要执行一系列的函数；
   2. Scope Hoisting可以将函数合并到一个模块中来运行；
3. 使用Scope Hoisting非常的简单，webpack已经内置了对应的模块：
   1. 在production模式下，默认这个模块就会启用；
   2. 在development模式下，我们需要自己来打开该模块；

举个例子说明下：
如果文件a导出了字符串a，index.js引入了a，并且console.log(字符串a)，那么如果没有开启scope hosting，打包出来的结果是：
在modules数组中，有一个对象元素，key为a模块路径，value为一个函数，函数内部包含了a模块的内容；然后还有一个index.js模块，根据引用关系去找到modules中的a模块，然后加载进来。相当于打包后，a模块的内容都被打包进去了。
但其实，我只是在index.js中使用了一下a模块的导出结果，也就是字符串a，那么我只要把index.js中用到a的地方替换成字符串’a’就可以了，没必要把整个a模块都打包进来。scope hosting就是用来做到这一点的。