Scope Hoisting, “magic comments”, and more!
在我们发布了webpack v2之后，我们曾向社区做了一些承诺。 我们承诺，我们将提供用户投票的功能。 此外，我们承诺我们的发布周期会更快，更稳定。
这次没有betas版本，完全向下兼容。我们承诺让你们——让webpack成长的社区——更轻松的使用。webpack团队自豪地宣布，今天我们已经发布了webpack 3.0.0！ 现在就可以下载或升级！
npm install webpack@3.0.0 --save-dev
或者
yarn add webpack@3.0.0 --dev
从webpack2 迁移到3，只需要执行升级命令，在使用上没有任何差别。我们将此标记为重大升级是因为内部的突破性变化可能会影响某些插件的使用。
到目前为止，98%的升级的用户都没有遇到任何不兼容！
What’s new?
像上文提到的一样，我们发布了一些由用户投票选出的功能，感谢Github，赞助商和我们的支持者，有了他们我们才能做出每一个改进。😍
🔬Scope Hoisting 范围提升🔬
范围提升是webpack 3的旗舰功能。在打包时，Webpack将您的捆绑包中的每个模块都将被包装在单独的函数闭包(function closure) 中。这些闭包会使您的JavaScript在浏览器中执行速度更慢。相比之下，像 Closure Compiler 和 RollupJS ‘hoist’ 这样的工具可以将所有模块包装在一个大的闭包内，从而使您的代码在浏览器中具有更快的执行速度。
<img src="https://pic3.zhimg.com/v2-21273e828b070e11b46efa19348472a2_b.png" data-rawwidth="496" data-rawheight="275" class="origin_image zh-lightbox-thumb" width="496" data-original="https://pic3.zhimg.com/v2-21273e828b070e11b46efa19348472a2_r.png">
而现在，使用webpack 3，您现在可以在配置中添加下面的插件以启用范围提升：
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};
范围提升是基于ECMAScript Module语法实现的一个特征。通过这个，webpack可以根据你正在使用什么样的模块和一些其他条件来回退到正常的捆绑。
为了了解什么触发了这些回退，我们添加了一个--display-optimization-bailout cli标志，它将告诉你是什么导致的回退。
<img src="https://pic2.zhimg.com/v2-ca5d20c0e68cd81e0f265be2b279f539_b.png" data-rawwidth="499" data-rawheight="198" class="origin_image zh-lightbox-thumb" width="499" data-original="https://pic2.zhimg.com/v2-ca5d20c0e68cd81e0f265be2b279f539_r.png">
同时，由于范围提升会移除模块外的函数包装，你可能会看到一些小的体积改进。然而，更显着的改进是JavaScript在浏览器中加载的速度。 如果您在比较使用之前和之后时发现加载速度取得了非常棒的改进，请随时回复一些数据，我们将很荣幸分享！
🔮 ”Magic Comments” 🔮 魔法注释
当我们在webpack 2中引入使用动态导入语法（import()）时，用户表示，他们不能像使用require.ensure一样创建命名chunk。我们现在介绍由社区创建的“魔法注释”，它可以传递chunk名称，还有更多功能，例如可以添加更多的内联注释到 import() 语句中。
<img src="https://pic1.zhimg.com/v2-dd152b129a9fb4d76d76d146c482166c_b.png" data-rawwidth="639" data-rawheight="130" class="origin_image zh-lightbox-thumb" width="639" data-original="https://pic1.zhimg.com/v2-dd152b129a9fb4d76d76d146c482166c_r.png">
尽管这是我们在v2.4和v2.6中发布的技术特性，但在v3中，我们修复了这些功能的一些bug，使其变得更稳定。 同时，现在允许动态导入语法具有与require.ensure相同的灵活性。
<img src="https://pic2.zhimg.com/v2-9935ca0055827460f823af1248c9c5a9_b.png" data-rawwidth="511" data-rawheight="413" class="origin_image zh-lightbox-thumb" width="511" data-original="https://pic2.zhimg.com/v2-9935ca0055827460f823af1248c9c5a9_r.png">
要了解更多信息，请参阅我们最新文档的代码分割部分，文档高亮了这些新功能！
😍 What‘s next?😍
我们有很多功能和增强功能想要推出！但我们需要了解用户需求的优先级。所以访问我们的投票页面，并提出你想看到的功能！
这些是我们希望带给您的一些功能：
-
更好地构建缓存
-
更快的初始和增量版本
-
更好的TypeScript体验
-
改进长期缓存
-
WASM模块支持
-
改善用户体验
🙇Thank you 🙇
感谢我们所有的用户，贡献者，文档作者，博客，赞助商，支持者和维护者。是他们都帮助我们确保webpack在未来几年成功。
为此，我们感谢所有人。webpack发展到现在与你的支持密不可分，我们迫不及待地想要与你分享未来webpack的新进展！
没有时间帮助贡献？ 想以其他方式回馈？ 通过捐赠给我们的Open Collective成为支持者或赞助商。Open Collective不仅有助于支持核心团队，而且还支持那些在花了大量空余时间帮助webpack进行改善的贡献者！❤
