原文连接: webpack 3: Official Release!! node
做者:Sean T. Larkinreact
翻译:野草webpack
发布webpack 2以后,咱们就跟社区承诺:咱们将发布你们投票出来的功能特性,并且会保证更快更稳定的发布周期。git
不会再有一年才出来的测试版本,不会再有不兼容的重大改变。咱们承诺咱们会保证你们的权益,由于大家才使得wepack如此欣欣向荣。github
如今webpack团队很自豪地跟你们宣布,今天(2017.06.20)正式发布了webpack 3.0.0!如今就能够下载升级了!!!web
npm install webpack@3.0.0 --save-dev
或者npm
yarn add webpack@3.0.0 --dev
从webpack 2迁移到webpack 3只须要上述简简单单的一条命令行就完成升级。因为webpack内部的一些会影响到插件的大更改,咱们把这个版本定为全新的版本号。缓存
如上所述,咱们更新的是大家投票出来的特性。正由于Github上庞大的代码贡献,赞助者以及拥护者的支持,咱们才得以一一击破这些新特性。闭包
做用域提高是wepack 3的核心特性。webpack在打包时会把每一个模块用单独的闭包封装起来,这些闭包会减速代码的执行过程,但这是webpack在性能和??之间做出的一个权衡。相比之下,诸如Closure Compiler和RollupJS之类的打包工具“提高”或者说打通了全部模块的做用域,将文件打包到一个闭包函数中,提升了代码的执行速度。async
如今有了webpack 3,能够在配置上中添加以下插件来实现做用域提高的功能:
module.exports = { plugins: [ new webpack.optimize.ModuleConcatenationPlugin() ] };
做用域提高是ECMAScript标准中模块的新语法。webpack打包也可能会回退到常规的打包策略,这取决于你采用的是哪一种模块语法(ES模块语法仍是其余模块语法),固然还有其余条件。
想知道回退的缘由,能够添加--display-optimization-bailout
属性,它会在回退的时候通知你并显示缘由。
因为做用域提高移除了模块的闭包函数,打包后的代码可能会变小。不过,最关键的提高点是代码执行速度。若是你有很好的对比例子,能够告诉咱们,咱们很乐意与你们分享。
当咱们告诉你们webpack 2能够使用动态引入语法(import()
)的时候,开发者反馈说它不能像require.ensure
同样命名打包以后文件的名字。
如今咱们引入了社区所谓的魔法注释特性,它能让开发者在import()
语句中之内联注释的方式传入打包后文件的名字,以及其余更多配置。
import(/* webpackChunkName: "my-chunk-name" */ 'module');
这些特性在webpack 2.4 和 2.6 版本中已经发布,可是v3版本修复了已有的bug,保证了特性的稳定性。如今,咱们能够像使用require.ensure
同样灵活地使用动态引入语法了。
想了解更多,点击查看咱们最新的“代码分割”官方文档。
咱们但愿带给大家更多的新特性和原有代码改善。点击投票页面,选出你最期待的特性,咱们将根据你们的意愿来优先完善。
如下是咱们正在作的:
更好的构建缓存
更快的初次和渐进构建体验
更好的TypeScript体验
长期缓存改进
WASM模块支持
用户体验提高
Git仓库上列出列 webpack 2.6.1到wepback 3.0.0的新特性:
node_modules no longer mangle to ~ in stats(重大改变)
HMR请求可配置超时时间
新增试验性特性做用域提高
性能提高
新增output.libraryExport
配置导出的库
sourceMapFilename
支持[contenthash]
(重大改变)
module.noParse
支持函数
新增node: false
配置项使全部node配置失效