Webpack 3.0.0

Webpack 是一款模块加载、打包工具，它能把各种资源，例如 JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
Webpack 团队近日宣布正式发布Webpack 3.0 版本。在 2.0 版本发布之后，Webpack 团队与社区联系更为紧密，在优先实现社区希冀的功能需求的同时，提供了更快且更稳定的发布流程。对于本次发布的
Webpack 3.0 版本，用户可以便捷地平滑升级，享受新版本中带来的性能提升与 Magic Comment 等新特征。

下载或升级webpack 3.0.0

npm install webpack@3.0.0 --save-dev

或者

yarn add webpack@3.0.0 --dev

新特性

作用域提升（Scope Hositing ）

作用域提升（Scope Hositing ）是 Webpack 3 的标志性特征，老版本的 Webpack 需要将每个模块包裹在单独的函数闭包中以实现模块系统。而这些封装函数往往会使得浏览器中运行的 JavaScript 代码性能有所下降；而 Closure Compiler、RollupJS 这些构建工具则会将代码中所有的模块作用域连接到单一闭包中，从而保证了浏览器中的代码运行速度。
而 Webpack 3 中提供了如下的插件来允许开发者启用作用域提升特性来避免这种额外的性能损耗：

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

作用域提升是基于 ECMAScript 模块（Module）语法实现的一个特征。通过作用域提升，webpack 可以根据你正在使用的模块和一些其他条件来判断是否需要回退到普通的打包方式。

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

鉴于作用域提升特性能够移除模块的封装函数，开发者会发现引入该插件之后整个输出包体的体积也有所减少，并且直观地反映到浏览器中 javascript 的加载速度上。如果开发者发现应用的加载速度有所提升，欢迎将前后对比分享给 Webpack 团队。

“魔法注释”（Magic Comments）

在 Webpack 2 中介绍了如何使用动态导入语法（import()），不过部分开发者反映到无法创建自定义命名的块会导致它们无法使用require.ensure。
针对这个需求 Webpack 团队引入了所谓的 Magic Comments 特性，它允许用户通过设置行内注释的方式自定义块名。还有更多功能，例如可以添加更多的内联注释到import()语句中。

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

通过使用注释，我们能够在使用动态导入语法的同时，对代码块进行命名。
尽管这两个特性是在 2.4 与 2.6 版本中发布的，但是 Webpack 团队一直在修复其存在的部分问题。而在本次发布的 3.0 版本中，这两个特性已经相对稳定，方便开发者使用require.ensure 特性。如果想了解更多的相关信息，可以参考最新的代码分割参考稳定：https://webpack.js.org/guides/code-splitting-async。

参考博文：
webpack 3: 正式发布!!