🎁一个承诺的实现 —可预测的发布周期
当我们完成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.0-beta.0 无配置文件运行! #0CJS 🔥
现在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。这不是一个简单的工作，希望你去对他们的工作表示赞赏和支持
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,.jsand.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的贡献者或者赞助者，赞助地址。赞助不仅给核心团队，而且还给了花费大量时间改善我们组织的空闲时间的贡献者！❤
网友评论