🎁一个承诺的实现 —可预测的发布周期
当我们完成webpack3的发布版时,我们对社区承诺下一个主版本将会提供很长的开发周期。
我们实现了这个承诺【并将持续交付】通过为您带来一大套功能,改进和错误修复,现在就开始使用吧。
🤷如何安装 [v4.0.0-beta.0]
如果你用的yarn
yarn add webpack@next webpack-cli --dev
或者npm
:
npm install webpack@next webpack-cli --save-dev
🛠如何迁移?
在测试webpack4的时候,越多的人报告plugin 和loader的错误,我们就可以更好的构建一个迁移指南。
所以我们需要你查看更新文档和迁徙指南并提供错误反馈! 这有助于我们的文档组创建官方稳定迁移指南。
webpack 4有什么新东西?
下面是一些你会更关注的显著功能。如果想了解更详细的变更,功能和api改动, 请查看变更日志!!!
🚀性能
在多个场景下webpack4性能有着显著的提升,下面是一些主要的性能提升。
- 默认情况下,production模式,我们将提供Uglifyjs并行运行和缓存压缩结果。
- 我们发布了新版本的插件系统,事件回调和处理是单一形态的。
- 此外,webpack现在已经放弃了对Node v4的支持,使我们能够添加大量较新的ES6语法和数据结构,并且也通过V8进行了优化。 到目前为止,我们已经看到9小时到12分钟的报告!
ps:我们并没有实现完全的缓存和并行(webpack 5 将会实现)
🔥零配置 — #0CJS
直到今天之前,webpack都需要你明确的指定入口文件和输出文件。webpack4会默认使用./src
最为输入目录,./dist
作为输出目录。
这意味着你不需要任何配置就可以使用webpack!!!
现在webpack是一个零配置的打包工具,我们将会4.0-5.0提供更多的默认功能。
💪更好的默认配置— mode
你必须选择"production"模式或者"development"模式,通过mode指定。
production模式将会为您提供各种优化。包括压缩,作用域提升,无用代码修剪,无副作用模块修剪,同时包括各种插件例如NoEmitOnErrorsPlugin。
Development模式优化了速度和开发体验。以同样的方式,我们会在打包好的文件中包含被打包文件的路径,用于阅读的代码和快速构建!
🍰sideEffects — 更好的包体积
我们对package.json中的sideEffects:false
提供了支持。当这个字段被加到package.json中时,证明这个库没有副作用,意味着webpack可以安全的修剪无用代码。
例如,导入了lodash-es
的一个方法,包体积会增加223kib[压缩后],***webpack4***打包后只会增加3Kib!!!
我们以前把
sideEffets
叫做pure-module
。
🌳JSON Support & Tree Shaking
当你通过ES模块的方式引入JSON,webpack会剔除JSON模块没有用到的导出。当你从JSON引入了一堆没有用到的部分,webpack4的打包体积会更小。
😍升级到UglifyJS2
意味着你可以直接用ES6的语法压缩,而不用先翻译到es5语法。
我们必须感谢uglifyjs2的团队无私和艰难的工作,去支持es6。这不是一个简单的工作,希望你去对他们的工作表示赞赏和支持
🐐 模块类型添加.mjs支持
过去,javascript是webpack唯一支持的语言模块。这形成了一些想用css和html作为模块的用户的痛点。现在我们完全抽象了javascript特性用来支持新的api。目前我们提供了五个模块类型实现:
-
javascript/auto
: (webpack 3默认支持的) 模块系统包括: CommonJS, AMD, ESM -
javascript/esm
: EcmaScript 模块, 只支持ESM模块系统,其它方式不支持 (针对后缀是.mjs的文件) -
javascript/dynamic
: 只支持 CommonJS 和 AMD; EcmaScript模块系统不支持。 -
json
: JSON数据, 它支持require和import (针对后缀是.json的文件) -
webassembly/experimental
: WebAssembly模块(目前是实验性的,针对后缀是.wasm的文件) - 灵位webpack现在查找文件顺序是
.wasm
,.mjs
,.js
and.json
。
作为这个功能最大好处就是,现在我们支持css和html作为模块。这将允许你以html作为入口文件。
🔬WebAssembly支持
webpack现在支持import
和export
本地WebAssembly模块。这意味着你可以实现loaders支持Rust,C++,C 和其他WebAssmbly支持的语言。
💀再见 CommonsChunkPlugin
我们移除了CommonsChunkPlugin
,同时默认支持了更多的特性。对于希望细粒度控制缓存的用户,我们添加了 optimization.splitChunks
和optimization.runtimeChunk
,提供了更丰富更灵活的功能。
💖当然还有更多!
这里还有更多的功能需要你去探索,在官方文档
⌚计时开始
作为承诺,我们还有一个月的时间去发布webpack4的稳定版。这有充足的时间让我们测试plugin,loaders和生态系统。
我们需要你们的帮助测试和提升这个beta版。你们测试的越多,就能帮助我们更快的解决问题。
感谢每一个为webpack4贡献的小伙伴。就像我们说的,webpack的能力是我们每个人的功劳。
等不及去贡献?想成为一个webpack的贡献者或者赞助者,赞助地址。赞助不仅给核心团队,而且还给了花费大量时间改善我们组织的空闲时间的贡献者!❤