webpack 3 正式版发布!

6 月 20 日，Webpack 发布了最新的 3.0 版本，并在 Medium 发布了公告。这次没有 beta 版本，完全向下兼容。 现在就可以下载或升级！

通过命令直接安装即可，后面需要加上版本号。

代码:

npm install [email protected] --save-dev

或者

代码:

yarn add [email protected] --dev

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

到目前为止，98% 的升级的用户都没有遇到任何不兼容！所以可以断定，虽然版本号进行了大版本号的变更，不过并不会有太大的变化，可以松一口气了。

1. Webpack 3 的新特性

下面是 v3.0 Release 中的 Features List。

• node_modules no longer mangle to ~ in stats [breaking change]
• timeout for HMR requests is configurable
• added experimental Scope Hoisting (webpack.optimize.ModuleConcatenationPlugin)
• some performance improvements
• added output.libraryExport to select an export for the library
• sourceMapFilename now supports [contenthash] [breaking change]
• module.noParse supports functions
• add node: false option to disable all node specific additions

范围提升（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相同的灵活性。

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

接下来做什么？

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

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

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