webpack 4 测试版 —— 如今让咱们先一睹为快吧！

• 原文地址：🚀webpack 4 beta — try it today!🚀
• 原文做者：Sean T. Larkin
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：FateZeros
• 校对者：kangkai124 MechanicianW

🚀webpack 4 测试版 —— 如今让咱们先一睹为快吧！🚀

为了支持数以百万计的功能，用例和需求，它须要一个安全，稳定，可靠和可拓展的基础。只有 webpack 具备无限的可能性。

稳定的发布之路！

自八月初以来 —— 当咱们从 **webpack/webpack#master** 中分出 **next** 分支的时候 —— 咱们看到了惊人的贡献量涌入。

可使用 gitinspector 一目了然地查看 webpack next 分支上的 Git 贡献统计信息。能够在你的项目上尝试一下，来仔细研究下。 PS：这还不包括咱们的 webpack-cli 团队 和 webpack-contrib 组织，他们在支持加载器和插件上面作了大量的工做。

🎉 今天，咱们很自豪可以经过发布 webpack 4.0.0 - beta.0 来分享这项工做的成果！ 🎉

🎁一个实现的承诺 —— 可预测的发布周期

当咱们完成了 webpack 3 的发布以后，咱们向社区保证，主要版本的更迭会有一个更长的开发周期。

咱们已经兑现了这个承诺[并继续为之付诸实施]，给大家带来了一大套特性，改进和错误修复，咱们已经火烧眉毛地期待大家的实践！开始吧！

🤷‍怎么安装 [v4.0.0-beta.0]

若是你用的是 yarn:

yarn add webpack@next webpack-cli --dev

或者 npm:

npm install webpack@next webpack-cli --save-dev

🛠怎么迁移？

只有更多的人帮助测试 webpack 4，而且反馈不兼容的插件和加载器，咱们才能构建一份更加生动的迁移指南。

所以咱们须要你看看官方的更新日志 还有咱们的迁移草案并提供咱们有所缺失的反馈！这将帮助咱们的文档团队建立咱们的官方稳定版本迁移指南！

webpack 4 中有什么新功能呢？

下面就是一些你将会喜欢看到的更值得注意的功能。若想了解更新，功能和内部 API 修改的完整的清单,请参阅咱们的修改日志

🚀更好的性能

在 webpack 4 的多个场景中，性能将显着加强。下面是咱们为实现这一目标而作出的一些显著改动：

• 默认状况下，在使用 production 模式时，咱们会使用 UglifyJS 自动并行编译和缓存来减小工做量 。
• 咱们发布了一个新版的插件系统以便事件钩子和处理函数是单一形态的。
• 另外，webpack 现已放弃对 Node v4 的支持，使咱们可以添加大量的新型 ES6 语法和数据结构，而且也经过 V8 进行了优化。迄今为止，咱们已经收到一些用户报告说，构建时间由 9 小时减小到 12 分钟！

PS: 咱们尚未彻底实现缓存和并行化 😉 这是[webpack 5 的里程碑]。

🔥更好的默认配置 —— 零配置

直到今天，webpack 一直要求你明确设置你的 entry 和 output 属性。对于 webpack 4 ，webpack 会自动假设你的 entry 属性是 ./src，而且打包会默认输出到 ./dist 中。

这意味着 你开始使用 webpack 再也不须要一个配置！

webpack 4.0.0-beta.0 运行一个没有配置的版本

如今 webpack 是一个零配置开箱即用的打包器，咱们将为 4.x 和 5.0 奠基基础，以便未来提供更多的默认功能。

💪更好的默认模式 —— mode

你如今必须在两种模式之间选择 (mode 或 --mode)：production 或 development

• 生产模式能够为你提供各类优化。这包含代码压缩，做用域提高，未引用模块移除，无反作用模块修剪，还包含引入一些像 NoEmitOnErrorsPlugin 这样须要你手动使用的插件。
• 开发模式优化了开发速度和开发体验。一样，咱们会自动在你的包输出中包含像路径名，eval-source-maps 这样的功能，以便阅读代码和快速构建！

🍰sideEffects 设置 —— 在打包体积上巨大的胜利

咱们在 package.json 中引入了对 sideEffects: false 的支持。当这个字段被添加时，它向 webpack 发出信号，表示被使用的库没有反作用。这意味着 webpack 能够安全地清除你代码中使用的任何重复导出模块。

例如，从 lodash-es 中单独导入 export 将会花费 ~223 KiB [压缩后的]。在 webpack 4 中，如今这只花费 ~3 KiB !

🌳支持 JSON 和 Tree Shaking

当你使用 ESModule 语法 import JSON 时，webpack 会消除 “JSON Module” 中未使用的导出。对于那些已经将大量未使用模块的 JSON 导入到你的代码的应用，你会看到 你打包体积明显减少。

😍升级到 UglifyJS2

这意味着你可使用 ES6 语法，压缩它，而无需使用转换器。

咱们要感谢 UglifyJs2 的贡献者团队为支持 ES6 而付出的无私和辛勤的努力。这不是一件简单的任务，咱们很乐意拜访大家的代码仓库来表达对大家的感谢和支持。

UglifyJS2 如今支持 ES6 JavaScript 语法！

🐐 模块类型的引入 + 支持 .mjs

历史上，JavaScript 是 webpack 中惟一的一流模块类型。这给那些不能高效的打包 CSS/HTML 的用户带来了不少尴尬的痛苦。咱们彻底从咱们的代码库中抽象出了 JavaScript 特性，以容许这个新的 API。目前建成，咱们如今有5个模块类型实现引入：

• javascript/auto: (在 webpack 3 默认启用) 启用了全部的 Javascript 模块系统：CommonJS，AMD，ESM
• javascript/esm: EcmaScript 模块，全部的其余模块系统不可用（默认 .mjs 文件）
• javascript/dynamic: 只有 CommonJS 和，EcmaScript 模块不可用
• json: JSON 数据，它能够经过 require 和 import 来引入使用（默认 .json 的文件）
• webassembly/experimental: WebAssembly模块（当前为 .wasm 文件的实验文件和默认文件）
• 另外 webpack 如今支持查找 .wasm, .mjs, .js 和 .json 拓展文件来解析

**这个功能最让人兴奋的是，咱们能够继续使用 CSS 和 HTML 模块模型 （4.x）。**这将容许像 HTML 这样的功能做为你的入口点！

🔬支持 WebAssembly

Webpack 如今默认支持任何本地 WebAssembly 模块的 import 和 export。这意味着你也能够写加载器，让你能够直接 import Rust，C++，C 和其余 WebAssembly 语言：

💀去除 CommonsChunkPlugin

咱们也删除了 CommonsChunkPlugin，并默认启用了它的许多功能。另外，对于须要对其缓存策略进行细粒度控制的用户，咱们已经添加了 optimization.splitChunks 和 optimization.runtimeChunk 它们具备更丰富，更灵活的功能

💖还有更多！

还有不少的功能 咱们强烈建议你在咱们的官方更新日志上查看全部。

⌚ 从如今开始倒计时

正如所承诺的那样，咱们将从今天开始等待一个月，而后再发布 webpack 4 稳定版。 这使咱们的插件，加载器和集成生态系统有时间去测试，报告并升级到 webpack 4.0.0 中！

咱们须要你帮助咱们升级和测试这个测试版。咱们今天测试的越多，咱们就能够更快的分诊和识别任何可能出现的问题！

很是感谢全部帮助咱们完成 webpack 4 的贡献者。正如咱们所说，wepack 的成就是咱们你们和生态系统的的共同努力造就的。

---

没有时间帮忙贡献？想要以其余方式回馈？经过捐助给咱们的开放集体成为 webpack 的支持者或赞助商。开放集体不只有助于支持核心团队，也支持花费了大量空闲时间改善组织的贡献者！ ❤

感谢Florent Cailhol, Tobias Koppers, 和John Reilly.

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。