[翻译]webpack3:发布

· 3 min read

原文网址webpack-3-official-release

webpack v2发布以来，面向社区，我们做出了一些承诺，我们将发布一些你们投票的功能点。此外，我们也承诺以更快、更稳定的周期去发布它们。

不到一年之久的beta版，发版之间并没有破坏型的变化,我们承诺这样做，因为是你们，是社区使得webpack如此繁荣。

webpack团队宣布，我们发布了webpack3.0.0,你如今可以下载或者更新它。

npm install webpack@3.0.0 --save-dev 或者 yarn add webpack@3.0.0 --dev

从webpack2升级到webpack3,除了在终端执行更新指令，应该不需要做什么。我们将此作为一个主要的改变，是因为内部的改变，会影响一些插件。

截止目前,我们已经见到98%的用户更新没有什么破坏型的改变。

亮点

正如我们所提到的，我们致力于发布那些你们投票所需要的功能。正是由于Github的贡献，来自于我们的支持者和赞助者的支持，我们能够解决任何的问题。

Scope Hoisting 作用域提升

作用域提升是webpack3的旗舰级功能，webpack的一个取舍就是当构建打包的时候，每个模块都打包再单独的函数闭包中去。这些包装函数使得JS在浏览器下运行时较慢的。相比之下，像Closure Compiler和RollupJS’hoist’这样的工具可以将所有模块的作用域连接成一个闭包，并使得你的代码能够有更快的执行效率。

如今随着webpack3的到来，你可以添加下面的插件到你的配置文件中，从而开启这个功能：

module.exports = {  
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

作用域提升特别是ECMAScript Module语法实现的功能。因为这个Webpack可以根据你正在使用什么模块和其它条件，从而回退到正常的构建。

为了解是什么触发的这些回退，我们针对CLI添加一个参数--display-optimization-bailout,这个标记将告诉你是什么导致的回退操作。

因为作用域提升将会删除一些函数，所以你将会看到较小的体积减少。然而，显著的提升是JS在浏览器中的运行速度。如果你有升级前后显著的对比数据，欢迎回复一些数据，我们很荣幸去分享这些。

Magic Comments 魔法注释

当我们在webpack2中引入了动态导入标记(import()),用户表示，他们不能够像require.ensure那样创建命名chunks。

我们现在引入叫做魔法注释，你可以通过行内注释的方式明确chunk名称

import(/* webpackChunkName: "my-chunk-name" */ 'module');

虽然这些是我们在v2.4和v2.6已经发布的功能点，但是我们努力去稳定和修复这些功能中的bug,现在已经在v3落地。如今已经赋予了动态导入语法,具有与require.ensure一样的灵活性。

想了解更多的消息，请看我们最新文档中关于代码分部分中高亮的这些功能点。

接下来是什么

这里有些是我们希望带给你们的东西

更棒的构建缓存
更快的初始化和增量构建
更好的Typescript体验
改进长期缓存
WASM模块支持
改进用户体验

感谢

我们所有的用户、贡献者、文档作者、博主、赞助者和所有的维护者都是帮助帮助我们确保webpack在未来几年成功的股东。

基于此，感谢所有人。如果没有你们是不可能的，我们迫不及待分享未来的东西。

没时间取做贡献?想以其它形式提供支持?通过捐助到我们的open collective成为一个支持者或者赞助者。Open Collective不仅帮助支持我们的核心团队，也支持那些利用空闲时间花费了大量时间改进组织的贡献者。

Last updated on Jul 25, 2017