资讯专栏INFORMATION COLUMN

webpack4.0测试版指南

MageekChiu / 1025人阅读

摘要:我们发布了新版本的插件系统,以便事件挂钩和处理程序是单态的。倒计时按照承诺,我们将从今天开始等待一个月,然后再释放稳定版。这为我们的插件,加载程序和集成生态系统提供了测试,报告和升级到的时间我们需要您帮助我们升级并测试此测试版。

自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.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的威力是我们的零件和生态系统的总和。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94515.html

相关文章

  • webpack4.0初体验、各版本及parcel性能对比

    摘要:前段时间又发布了新版本我接触的时候已经版本了支持的版本必须打包速度大小比较以及粗浅的试了一下下图所示,黄色为版本绿色为我写的配置,跟基本相似,具体不同下面会介绍蓝色是自带的模式红色为具体大小速度大家可以比较一下,还是很给力的关于配置方面,应 前段时间webpack又发布了新版本webpack4我接触的时候已经4.1版本了node支持的版本必须node: >=6.11.5 webpack...

    MarvinZhang 评论0 收藏0
  • webpack4-Tree-Shaking优化

    摘要:概念由来已久,今天再来谈一谈,是因为中有了新的优化。简单的介绍下什么是。它已经为我们消除了副作用。而且我并没有引入。即便根据文件大小,可能还有朋友持怀疑态度。因为最近才接触。所以没有在低版本的时候打包过。 Tree-Shaking概念由来已久,今天再来谈一谈,是因为webpack4中有了新的优化。简单的介绍下什么是Tree-Shaking。 代码不会被执行 if(false) { ...

    bawn 评论0 收藏0
  • 如何优雅的升级到 webpack4

    摘要:默认出入口在中,不再强制要求指定和路径。构建模式提供了两种构建模式可供选择和选项描述会将的值设为。如果是,那就会开启。默认只会对按需加载的代码做分割。在或更低版本中,如果你想为一个推导出来的定制选项,你不得不在自己的选项中将它重复一遍。 前言 现在距离2018年2月15号webpack4.0.0出来已经有一段时间了,现在已经出了 @vue/cli 3.0,但是楼主还没试过,听说很强大,...

    zhangfaliang 评论0 收藏0
  • webpack4.0打包总结

    摘要:我们可以使用内置的为所有的依赖定义这个变量这是开发环境这是生产环境作者正儿八经的娇娇链接来源掘金著作权归作者所有。 1.webpack概念 WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。 构建就是把源代码转换成发布到线上...

    XFLY 评论0 收藏0

发表评论

0条评论

MageekChiu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<