webpack3官方正式发布,亮点:作用域提升，“魔法注释”，以及更多新特性！

发表于 | 更新于: | 分类于 |
字数统计: 1,188 | 阅读时长 ≈ 4

作用域提升，“魔法注释”，以及更多新特性！

原文

在我们发布了 webpack v2 之后，我们曾向社区做了一些承诺。 我们承诺，我们将提供用户投票的功能。 此外，我们承诺我们的发布周期会 更快，更稳定。

这次没有 beta 版本，完全向下兼容。我们承诺让你们、让 webpack 成长的社区更轻松的使用。webpack 团队自豪地宣布，今天我们已经发布了 webpack 3.0.0！ 现在就可以下载或升级！

npm install webpack@3.0.0 --save-dev

或者使用

yarn add webpack@3.0.0 --dev

从 webpack 2 迁移到 3，只需要执行升级命令，在使用上没有任何差别。我们将这次升级标记为版本的重大升级，是因为内部的突破性变化可能会影响某些插件的使用。

到目前为止，98%的升级的用户都没有遇到任何不兼容！

有哪些新特性?

像上文提到的一样，我们发布了一些由用户投票选出的功能，感谢 Github，赞助商和我们的支持者，有了他们我们才能做出每一个改进。😍

🔬作用域提升（Scope Hoisting）🔬

作用域提升是 webpack 3 的重点功能。之前 webpack 在打包时，您的 bundle 中的每个模块都将被包装在单独的函数闭包中。这些闭包会使您的 JavaScript 在浏览器中执行速度更慢。相比之下，像 Closure Compiler 和 RollupJS 这样的工具可以将所有模块包装在一个大的闭包内，从而使您的代码在浏览器中具有更快的执行速度。

而现在，使用 webpack 3，您现在可以 在配置中添加下面的插件以启用作用域提升：

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

作用域提升是基于 ECMAScript Module 语法实现的一个特征。通过这个，webpack 可以根据你正在使用什么样的模块和一些其他条件来回退到正常的捆绑。

为了了解什么触发了这些回退，我们添加了一个 --display-optimization-bailoutcli 标志，它将告诉你是什么导致的回退。

同时，由于作用域提升会移除模块外的函数包装，你可能会看到一些小的体积改进。然而，更显着的改进是JavaScript在浏览器中加载的速度。 如果您在比较使用之前和之后时发现加载速度取得了非常棒的改进，请随时回复一些数据，我们将很荣幸分享！

🔮 魔法注释 ”Magic Comments” 🔮

当我们在webpack 2中引入使用动态导入语法（import()）时，用户表示，他们不能像使用 require.ensure 一样创建命名 chunk。我们现在介绍由社区创建的“魔法注释”，它可以传递 chunk 名称，还有更多功能，例如可以添加更多的内联注释到 import() 语句中。

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

通过使用注释，我们能够在使用动态导入语法的同时，对代码块进行命名。

尽管这是我们在 v2.4 和 v2.6 中发布的技术特性，但在 v3 中，我们修复了这些功能的一些错误，使其变得更稳定。 同时，现在允许动态导入语法具有与 require.ensure 相同的灵活性。

要了解更多信息，请参阅我们最新文档的代码分割部分，文档高亮了这些新功能！

😍 接下来是什么？😍

我们有很多功能和增强功能想要推出！但我们需要了解用户需求的优先级。所以访问我们的投票页面，并提出你想看到的功能！

这些是我们希望带给您的一些功能：

  • 更好地构建缓存
  • 更快的初始构建和增量构建
  • 更好的TypeScript体验
  • 改进长期缓存
  • WASM模块支持
  • 改善用户体验

🙇 致谢 🙇

感谢我们所有的用户，贡献者，文档作者，博客，赞助商，支持者和维护者。是他们都帮助我们确保 webpack 在未来几年成功。

为此，我们感谢所有人。webpack 发展到现在与你的支持密不可分，我们迫不及待地想要与你分享未来 webpack 的新进展！

0%