webpack4.0测试版指南

自8月初以来—当我们将 nex branch 合并到webpack/webpack#master—我们看到了巨大的贡献！

?今天，我们很自豪地发布webpack 4.0.0-beta.0来分享这项工作的成果！ ?

?A Promise Fulfilled — 可预测的发布周期

当我们完成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时，越来越多的人尝试将reporting plugin和 loader程序不兼容，我们就可以构建一个生动的移植指南。

因此，我们需要您查看 官方更改日志 以及 我们的迁移草案 并在我们有遗漏的地方提供反馈! 这将帮助我们的文档团队创建我们的官方稳定版本迁移指南！

webpack 4有什么新功能?

以下是一些您想要知道的以及一些更值得注意的功能. 有关更改功能和内部API修改的完整列表 请参阅我们的更改日志!!!

?性能

在webpack 4的多种场景中，性能将显着增强。以下是我们为实现此目标而做出的一些显着变化：

• 默认情况下，在使用 production 模式时，我们将自动并行化并缓存由UglifyJS完成的缩小工作。
• 我们发布了新版本的插件系统，以便事件挂钩和处理程序是单态的。
• 此外，webpack现在已经放弃了对Node v4的支持，使我们能够添加大量较新的ES6语法和数据结构，并且也通过V8进行了优化。到目前为止，我们已经看到9小时12分钟的真实报道！

PS: 我们甚至还没有实现全缓存和并行性 ? [webpack 5里程碑]

?更好的默认值 — #0CJS

直到今天，webpack一直要求您明确设置您的输入和输出属性。使用webpack 4，webpack会自动假设您的入口属性为./src/，并且默认情况下，bundle将输出为./dist。

这意味着 您不再需要配置就可以开始使用webpack!!

现在webpack是＃0CJS（Zero Configuration）开箱即用的打包程序，我们将在4.x和5.0中奠定基础，以便在将来提供更多的默认功能。

?更好的默认值  — mode

您现在必须在两种模式之间选择（模式或 - 模式）：“production” 或者“development”.”。

• 生产模式为您提供各种优化。这包括缩小，范围提升，抖动，无副作用的模块修剪，并且包括必须像NoEmitOnErrorsPlugin一样手动使用的插件。
• 开发模式针对速度和开发人员的体验进以同样的方式，我们会自动在您的包输出中包含路径名称等功能，eval-source-maps，这些功能是为了易于阅读代码和快速构建！

?sideEffects —  bundle sizes的巨大胜利

我们在package.json中引入了对sideEffects：false。添加此字段时，它会向webpack发送信号，表明库中没有正在使用的sideEffects。这意味着webpack可以安全地消除代码中使用的任何重新导出。

例如，仅从lodash-es作为single_export_导入将花费约223 KiB [压缩后]。在webpack 4中，这个代价现在是〜3 KiB！

?JSON Support & Tree Shaking

当您使用ESModule语法导入JSON时，webpack将从“JSON模块”中消除未使用的导出。对于那些已经将大量未使用的片段导入到代码中的人来说，你会发现你的包的大小会显着减小。

?升级到UglifyJS2

这意味着您可以使用ES6语法，将其缩小，而无需第一个转译器。

我们要感谢UglifyJs2团队的贡献者为实现ES6支持所做的无私和努力工作。这不是一件容易的事情，我们很乐意让你去看看他们的 repository 并表达你的赞赏和支持

? Module Type的推出+ .mjs支持

历史上，JavaScript是webpack中唯一的一流模块类型。这给用户带来了很多尴尬的痛苦，他们无法有效地使用CSS / HTML Bundle等。现在我们从代码库中抽象出JavaScript特性，以允许这个新的API。我们现在有5个模块类型实现：

• javascript/auto:_（在webpack 3中的默认值_）_已启用所有模块系统的Javascript模块：CommonJS，AMD，ESM
• javascript/esm: EcmaScript模块，所有其他模块系统都不可用_（默认为.mjs文件）_
• javascript/dynamic: 只有CommonJS和AMD; EcmaScript模块不可用
• json: JSON数据，它可以通过require和import （默认的.json文件）
• webassembly/experimental: WebAssembly模块 （当前为.wasm文件的实验文件和默认文件）
• 此外，webpack现在按此顺序查找.wasm，.mjs，.js和.json扩展名以解析

这个功能最令人兴奋的是，现在我们可以继续使用CSS和HTML模块类型（4.x）。这将允许像HTML这样的功能成为您的入门点！

?WebAssembly支持

默认情况下，Webpack支持导入和导出任何本地WebAssembly模块。这意味着您还可以编写装载器，以便您直接导入Rust，C ++，C和其他WebAssembly主机lang文件：

?再见CommonsChunkPlugin

我们还删除了CommonsChunkPlugin并默认启用了其许多功能。另外，对于那些需要对其缓存策略进行细粒度控制的用户，我们添加了更丰富，更灵活的一组功能optimization.splitChunks和optimization.runtimeChunk

?还有更多！

还有更多的功能，我们强烈建议您在我们的 官方日志中中查看所有功能。

⌚倒计时

按照承诺，我们将从今天开始等待一个月，然后再释放webpack 4稳定版。这为我们的插件，加载程序和集成生态系统提供了测试，报告和升级到webpack 4.0.0的时间！

我们需要您帮助我们升级并测试此测试版。我们今天可以测试的越多，我们就可以更快地进行分类并找出任何可能出现的问题！

非常感谢所有帮助我们制作wepback 4的贡献者。正如我们总是说的那样，webpack的威力是我们的零件和生态系统的总和。

原文地址：https://medium.com/webpack/we...