_小生_

🚀webpack 4测试版 - 今天试用🚀

原文链接: medium.com

自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 pluginloader程序不兼容,我们就可以构建一个生动的移植指南。

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

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.x5.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.splitChunksoptimization.runtimeChunk

💖还有更多!

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

⌚倒计时

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

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

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