我们先来简单分析一下：（没有开启Scope Hoisting ）
现象：构建后的代码存在大量的闭包代码
[
(function (module, __webpack_exports__, __webpack_require__) {
var __WEBPACK_IMPORTED_MODULE_0__util_js__ = __webpack_require__(1);
console.log(__WEBPACK_IMPORTED_MODULE_0__util_js__["a"]);
}),
(function (module, __webpack_exports__, __webpack_require__) {
__webpack_exports__["a"] = ('Hello,Webpack');
})
]
问题
- 大量函数闭包包裹代码，导致体积增大（模块越多越明显）
-
运行代码时创建的函数作用域变多，内存开销变大
在讨论Scope Hoisting之前，我们先来了解一下什么是Scope Hoisting? 它有什么作用？
Scope Hoisting 它可以让webpack打包出来的代码文件更小，运行更快，它可以被称作为 "作用域提升"。是在webpack3中提出来的，当然现在webpack4也是支持的。
开启Scope Hoisting之后：
[
(function (module, __webpack_exports__, __webpack_require__) {
var util = ('Hello,Webpack');
console.log(util);
})
]
结论：
- 打包出来的是一个IIFE（匿名闭包）
-
modules是一个数组，每一项是一个模块初始化函数
-
_webpack——require用来加载模块，返回module.export
-
通过WEBPACK_REQUIRE_METHOD(0)启动程序
scope hoisting原理
原理：将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突
对比：通过scope hoisting可以减少函数声明代码和内存开销
使用：
webpack mode为production默认开启（手动加入插件，防止代码压缩）
es6语法,cjs不支持
plugins: [
// 开启 Scope Hoisting 功能
new webpack.optimize.ModuleConcatenationPlugin()
]
简单理scope hoisting就是把多个作用域用一个作用域取代，以减少内存消耗并减少包裹块代码，从每个模块有一个包裹函数变成只有一个包裹函数包裹所有的模块，但是有一个前提就是，当模块的引用次数大于1时，比如被引用了两次或以上，那么这个效果会无效，也就是被引用多次的模块在被webpack处理后，会被独立的包裹函数所包裹
