Webpack3 正式版发布

继 Node, React, Angular 版本失控以后,Webpack 的版本也坐上了?

在以前的文章里,就提到了由于年前版本回退的缘由,我特地推迟了升级 webpack,就怕它又搞什么大新闻。前端

然而,没想到仍是中了圈套,webpack2 坚挺了还不到半年,就迎来了它的替代者。webpack

就在一周前 webpack3 正式版发布了git

此次版本升级的主要缘由有如下几点:github

  • webpack 内部实现变化web

  • 新增了模块串联功能。以前,webpack 会为每一个模块建立各自的闭包,使用串联功能将模块链接到一块儿后,就只需为这真个模块建立一个单独的闭包,从而减小没必要要的代码npm

  • 增长动态加载注释,便可为动态加载定义 chunk 名json

最最最重要的一点是不用修改任何配置就能从 webpack2 升级至 webpack3,这总算让我上个月的升级没有白费,至少 98% 的用户是这样。闭包

既然,不用改代码就能升级,又能大幅减少输出文件大小,那就升一波看看效果。先看一眼升级前的打包结果,app

before update

如今,经过 npm 命令默认安装的已是 3.0.0 的版本。升级的话,由于是大版本,因此别忘了先改 package.json 里面的依赖版本。post

升级以后直接跑命令,顺利打包。(谢天谢地,不是那 2%。)

after update

只是多了一个 warning。

DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.

这是由一些 webpack plugin 引发的,好比:extract-text-webpack-plugin 等。不过,不用理它。首先,它不影响打包,其次,已经有人提了 pr

结果看上去是否是和以前基本同样?不要着急,那是由于尚未用上模块串联的功能。开启模块串联的功能须要在配置中简单的加一个 plugin。

plugins: [
        // ...
        new webpack.optimize.ModuleConcatenationPlugin()
    ]

再看一眼结果,

build with module concatenation plugin

什么~app.js 只小了 3 kb(5%),广告果真都是骗人的,无论国内仍是国外...?(难道姿式不对,升级了的朋友都说说小了多少)

这样 webpack 3 升级就完成了,也用上了新特性,总得来讲此次升级在文件大小以及打包时间上仍是有所优化的,再加之升级的 effort 几乎为 0,仍是很是值得一试的。

PS:ESlint 也发布了 4.0 版本
(前端界一个个都是版本大佬)

首发于我的博客欢迎订阅

相关文章
相关标签/搜索