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...