webpack 4正式发布，速度最高可提升98％！

英文：Sean T. Larkin 译文：众成翻译/怡红公子

zcfy.cc/article/x1f3bc-webpack-4-released-today-webpack-medium

今天我们愉快的宣布 webpack 4(Legato)正式发布了！你可以使用 yarn 或者 npm 获得它：

$>yarn add webpack--dev

或者

$>npm i webpack--save-dev

为什么叫 Legato?

首先我们会开始一个新传统：为我们以后的每个大版本设定代号！因此，我们决定将命名这个特权给予我们最大的OpenCollective捐赠者：trivago！

当我们向其发出请求后他们是这么回复我们的：

[在 trivago] 我们通常以音乐主题来命名我们的项目。例如，我们之前的 JS 框架叫 “Harmony”，我们的新框架叫“Melody”。PHP 的话我们使用基于 Symfony 上层封装，我们叫它“Orchestra”。

Legato 意味着毫无间隙地连续演奏每个节奏。

这点和 Webpack 很像，Webpack 将我们的前端资源（JS，CSS甚至更多）无间隙的打包在一起。因此我们相信“Legato”这个代号会适合 Webpack。

——  Patrick Gotthardt

我们得知后也非常地激动，因为新版 Webpack 中我们所做的每一个更新目的都在于此，为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。非常感谢过去的这些年 trivago 对 webpack 的无私捐赠支持，更感谢其为 webpack 4 命名！

️有什么更新？

webpack 4 更快（速度提升98%）！

我们在社区中请求大家对 webpack 4 进行构建性能测试，得出的结果非常有趣。结果很惊人，构建时间降低了 60%-98%！！这里给大家分享一下某个用户的测试结果：

当然这只是一部分用户的测试数据，你可以在我的推文的回复中查看他们所有的结果。

性能测试过程中也发现了一些 loader 的 bug 我们已经及时修复了！！PS: 我们还没有实现多进程，或者缓存功能（计划在v5版实现）。所以理论上我们的性能还有非常大的提升空间！！！！

构件速度是我们此次发布最主要的目标。你可以把所有的功能都添加到工具中，但是如果不能节省开发时间那你加这些功能又有什么用呢？当然以上的这些都是部分示例，我们非常欢迎大家在推特上使用 #webpack #webpack4 开头提交你们的构建时间报告。

Mode, 零配置以及默认值

我们为 webpack 新增了一个 mode 配置项。mode 有两个值：development 或者是 production，默认值是 production。mode 是我们为减小生产环境构建体积以及节约开发环境的构建时间提供的一种优化方案。

如果想要了解更多 mode 配置项的内容，大家可以看看我们之前的一篇文章：webpack 4: mode 和优化。

另外，entry，output 这些配置项也都有默认值了。这意味着你不需要每次都配置它们了，当然包括 mode。这可能意味着从现在开始，在我们做出如此巨大改变之后，你的配置文件会变得非常小！

Legato 意味着毫无间隙地连续演奏每个节奏。

另外，我们提供零配置平台来扩展。webpack 最大的一个特色就是可扩展性。最终我们实现的零配置平台会是什么样子呢？当我们实现了 webpack presets 功能后，这意味着你可以基于零配置平台配置你自己、公司，甚至是社区的工作流配置用以继承直接使用。

✂ 再见 CommonsChunkPlugin

在新版中我们废弃并移除了 CommonsChunkPlugin，并且使用一些默认值以及更容易被复写的新 API optimize.splitChunks 来代替它。现在你可以在大部分场景中享受自动分块带来的便利了！

如果想要了解更多该 API 可以查看这篇文章：webpack 4: 代码分块以及分块优化

WebAssembly 支持

Webpack 现在默认支持在任何本地 WebAssembly 模块中的import和export语句。这意味着你可以直接在 Rust, C++, C 或者其它 WebAssembly 支持语言中使用import。

模块类型简介以及 .mjs 支持

之前，JS 一直都是 Webpack 唯一的一等模块类型。当用户不需要使用 CSS/HTML 的时可能会造成一些麻烦。我们基于新的 API 抽象实现了 JS 类型。目前，我们已经支持5种模块类型实现：

javascript/auto: _（webpack 3默认值）_ 所有的 JS 模块规范都可用：CommonJS，AMD，ESM

javascript/esm：EcmaScript 模块规范，其它的模块规范都不可用(.mjs 文件的默认值)

javascript/dynamic: 仅支持 CommonJS 和 AMD，EcmaScript 模块规范不可用

json: JSON 数据，使用require和import导入 JSON 数据时可用（.json 文件的默认值）

webassembly/experimental: WebAssembly 模块(.wasm 文件的默认值，目前还是试验阶段）

另外 webpack 支持直接查找.wasm,.mjs,.js和.json后缀文件

最让人激动的是，我们甚至可以支持 CSS 和 HTML 模块类型（计划在 webpack 4.x - 5 间版本实现）。它将允许我们直接将 HTML 作为入口文件！

如果你正在使用 HtmlWebpackPlugin

在发布之前我们预留了一个月的时间来升级所有的插件和 loader 以适配 webpack 4 的 API。然而，Jan Nicklas因为工作原因没办法参加，因此我们不得不发布了一个html-webpack-plugin的 fork 版。你可以使用如下命令安装它：

$>yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

当 Jan 本月底从海外工作回来时，我们会将我们的更新合并回jantimon/html-webpack-plugin仓库中！在此之前，如果你有任何问题，可以提交到这里！

如果你是插件或 loader 的开发者，你可以查看我们的迁移指南：webpack 4: 插件/loader 迁移指南。

还有！

还有更多的特性没有在本文列出，我们强烈建议大家去看一下我们的官方更新日志。

v4 的文档在哪？

我们马上要完成迁移指南和v4 的文档了。你可以访问文档仓库切换到next分支来获取更新情况，当然能搭把手帮个忙是再好不过了！

各框架 cli 工具支持怎么样了?

在过去的一个月我们也为每个框架的脚手架工作确保它们能支持 webpack 4。甚至最流行的库例如 lodash-es, RxJS 已经支持sideEffects选项，因此使用它们的最新版后你会发现打包体积会大幅度的减小。

AngularCLI 团队已经计划在近几周即将发布的大版本中直接使用 webpack 4！如果你想要知道最新进展，可以直接联系他们，并询问他们你能帮什么忙而不是直接询问它什么时候发布。

为什么你用如此多的 emoji 表情？

因为这样写文章很开心呀！大家也可以试试 。

接下来？

我们已经在着手计划下一个版本 webpack 4.x 和 5 的特性了，包括但不限于：

ESM 模块导出支持

持久缓存

WebAssembly 支持从experimental升级为stable稳定版。并增加 tree-shaking 和未使用代码去除！

Presets —— 基于零配置设计，任何东西都能支持零配置

CSS 模块类型——支持 CSS 作为入口文件（再见吧 ExtractTextWebpackPlugin）

HTML 模块类型——支持 HTML 作为入口文件

URL/文件 模块类型

自定义模块类型

多线程

重新定义我们的组织章程和计划任务

Google Summer of Code(之后单独写问说明!!!)

再次感谢

对于我们的贡献者团队，核心团队，loader 和插件作者，那些第一次提交他们的提交，或者帮助解决故障的人：我们不能不感谢你们。这个产品是为你而生的，你们帮助塑造了它。

2018 我们将注定要抛弃老古董思维，迎接 JS 的美丽复兴！❤

我之前已经多次强调过，在JS 复兴的今天，没有社区的帮忙，webpack 是不会变的如此强大，可持续以及蓬勃的生长。如果没有你们的帮助，webpack 可能现在也还只是另外一款普通的构建工具[Yet Another Build Tool (YABT)]而已。

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能

淘口令：复制以下红色内容，再打开手淘即可购买

范品社，使用￥极客T恤￥抢先预览（长按复制整段文案，打开手机淘宝即可进入活动内容）