028-86261949

当前位置:首页 > 行业新闻 > webpack 3: 正式发布

webpack 3: 正式发布

2017/06/26 11:59 分类: 行业新闻 浏览:43

Webpack 是一款模块加载、打包工具,它能把各种资源,例如 JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。最近Webpack 更新了新的版本Webpack  3,下面跟随源码时代web前端小编了解一下更新的主要内容。

webpack 3 正式发布

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

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

这次没有 beta 版本,完全向下兼容。我们承诺让你们——促进 webpack 成长的社区成员们——更轻松地使用。

webpack 团队自豪地宣布,今天我们发布了 webpack 3.0.0! 现在就可以下载或升级!

npm install webpack@3.0.0 --save-dev

或者

1yarn 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-bailout cli标志,它将告诉你是什么导致的回退。

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

 “魔法注释”(Magic Comments)

当我们在 webpack 2 中引入动态导入语法(import())的用法时,用户表示,他们不能像使用require.ensure一样创建命名代码块(chunk)。

我们现在介绍由社区创建的“魔法注释”,它可以传递代码块的名称,还有更多功能,例如可以添加更多的内联注释到import()语句中。

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

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

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

以上就是webpack 3更新的主要内容,更多新的消息可以持续关注源码时代官网。

#标签:webpack 3,行业动态,源码时代