终于走到这里，太美了。
" class="wp-smiley" style="height: 1em; max-height: 1em;" />
" class="wp-smiley" style="height: 1em; max-height: 1em;" />webpack 3 正式发布" class="wp-smiley" style="height: 1em; max-height: 1em;" />" class="wp-smiley" style="height: 1em; max-height: 1em;" />
作用域提升，“魔法注释”，以及更多新特性！
在发布了 webpack v2 之后，我们曾向社区做了一些承诺。我们承诺将会发布由用户票选出来的功能。此外，我们承诺发布周期会 更快，更稳定 。
这次没有 beta 版本，完全向下兼容。我们承诺让你们——促进 webpack 成长的社区成员们——更轻松地使用。
webpack 团队自豪地宣布，今天我们发布了 webpack 3.0.0！ 现在就可以下载或升级！
|
1
|
npm install webpack@3.0.0 —save–dev
|
或者
|
1
|
yarn add webpack@3.0.0 —dev
|
从 webpack 2 迁移到 3， 你只需要执行升级命令 ，而不需要修改任何代码。我们将这次升级标记为版本的重大升级，是因为内部的突破性变化可能会影响某些插件的使用。
到目前为止，98% 的升级的用户都没有遇到任何不兼容！
有哪些新特性?
上文已经提到，我们发布了一些由 用户投票 选出的功能，感谢 Github , 赞助商和我们的支持者，有了他们我们才能做出每一个改进。
" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 作用域提升（Scope Hoisting）" class="wp-smiley" style="height: 1em; max-height: 1em;" />
作用域提升是 webpack 3 的重点功能。之前 webpack 在打包时，您的 bundle 中的每个模块都将被包装在单独的函数闭包中。这些闭包会使您的 JavaScript 在浏览器中执行速度更慢。相比之下，像 Closure Compiler 和 RollupJS 这样的工具可以将所有模块包装在一个大的闭包内，从而使您的代码在浏览器中具有更快的执行速度。
如今，使用 webpack 3，您现在就可以 在配置中添加下面的插件以启用作用域提升 ：
|
1
2
3
4
5
|
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};
|
作用域提升是基于 ECMAScript 模块（Module）语法实现的一个特征。通过作用域提升，webpack 可以根据你正在使用的模块和 一些其他条件 来判断是否需要回退到普通的打包方式。
为了了解什么触发了这些回退，我们添加了一个 --display-optimization-bailout cli 标志，它将告诉你是什么导致的回退。
同时，由于作用域提升会移除模块外的函数包装，你可能会看到一些小的体积改进。然而，更显著的改进是 JavaScript 在浏览器中加载的速度。如果您在比较使用之前和之后时发现加载速度取得了非常棒的改进，请随时反馈一些数据，我们将很荣幸分享！
" class="wp-smiley" style="height: 1em; max-height: 1em;" /> “魔法注释”（Magic Comments）" class="wp-smiley" style="height: 1em; max-height: 1em;" />
当我们在 webpack 2 中引入动态导入语法（import()）的用法时，用户表示，他们不能像使用 require.ensure 一样创建命名代码块（chunk）。
我们现在介绍由社区创建的“魔法注释”，它可以传递代码块的名称，还有 更多功能 ，例如可以添加更多的内联注释到 import() 语句中。
|
1
|
import(/* webpackChunkName: “my-chunk-name” */ ‘module’);
|
通过使用注释，我们能够在使用动态导入语法的同时，对代码块进行命名。
尽管这是我们在 v2.4 和 v2.6 中发布的技术特性，但在 v3 中，我们修复了这些功能的一些错误，使其变得更稳定。 现在允许动态导入语法具有与 require.ensure 相同的灵活性。
要了解更多信息，请参阅我们 最新文档的代码分割部分 ，新功能部分已经高亮！
" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 接下来做什么？ " class="wp-smiley" style="height: 1em; max-height: 1em;" />
我们有很多功能和增强功能想要推出！但我们需要了解用户需求的优先级。所以 访问我们的投票页面，并提出你想看到的功能！
这些是我们希望能带给您的一些功能：
- 更好地构建缓存
- 更快的初始构建和增量构建
- 更好的 TypeScript 体验
- 改进长期缓存
- WASM 模块支持
- 改善用户体验
" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 致谢 " class="wp-smiley" style="height: 1em; max-height: 1em;" />
感谢我们所有的用户，贡献者，文档作者，博客，赞助商，支持者和维护者。是他们帮助我们确保 webpack 在未来几年成功。
为此，我们感谢所有人。webpack 发展到现在与你的支持密不可分，我们迫不及待地想要与你分享未来 webpack 的新进展！
没有时间帮助贡献？ 想以其他方式回馈？ 通过捐赠给我们的 开放集体 成为支持者或赞助商。 开放集体不仅有助于支持核心团队，而且还支持那些在花了大量空余时间帮助 webpack 进行改善的贡献者！❤
转自 http://ift.tt/2tV1sqO
The post webpack 3: 正式发布!! appeared first on Linuxeden开源社区.
http://ift.tt/2sysxSR
没有评论:
发表评论