为了支持数以百万计的功能,用例和需求,它需要一个安全,稳定,可靠和可拓展的基础。只有 webpack 具有无限的可能性。
自八月初以来 —— 当我们从 **webpack/webpack#master**
中分出 **next**
分支的时候 —— 我们看到了惊人的贡献量涌入。
可以用 gitinspector 一目了然地查看 webpack next 分支上的 Git 贡献统计信息。可以在你的项目上尝试一下,来仔细研究下。
PS:这还不包括我们的 webpack-cli 团队 和 webpack-contrib 组织,他们在支持加载器和插件上面做了大量的工作。
今天,我们很自豪能够通过发布 webpack 4.0.0 - beta.0 来分享这项工作的成果!
当我们完成了 webpack 3 的发布之后,我们向社区保证,主要版本的更迭会有一个更长的开发周期。
我们已经兑现了这个承诺[并继续为之付诸实施],给你们带来了一大套特性,改进和错误修复,我们已经迫不及待地期待你们的实践!开始吧!
如果你用的是 yarn
:
yarn add webpack@next webpack-cli --dev
或者 npm
:
npm install webpack@next webpack-cli --save-dev
只有更多的人帮助测试 webpack 4,并且反馈不兼容的插件和加载器,我们才能构建一份更加生动的迁移指南。
因此我们需要你看看官方的更新日志 还有我们的迁移草案并提供我们有所缺失的反馈!这将帮助我们的文档团队创建我们的官方稳定版本迁移指南!
下面就是一些你将会喜欢看到的更值得注意的功能。若想了解更新,功能和内部 API 修改的完整的清单,请参阅我们的修改日志。
在 webpack 4 的多个场景中,性能将显着增强。下面是我们为实现这一目标而做出的一些显著改动:
production
模式时,我们会使用 UglifyJS 自动并行编译和缓存来减少工作量 。PS: 我们还没有完全实现缓存和并行化 ? 这是[webpack 5 的里程碑]。
直到今天,webpack 一直要求你明确设置你的 entry
和 output
属性。对于 webpack 4 ,webpack 会自动假设你的 entry
属性是 ./src
,并且打包会默认输出到 ./dist
中。
这意味着 你开始使用 webpack 不再需要一个配置!
webpack 4.0.0-beta.0 运行一个没有配置的版本
现在 webpack 是一个零配置开箱即用的打包器,我们将为 4.x 和 5.0 奠定基础,以便将来提供更多的默认功能。
你现在必须在两种模式之间选择 (mode
或 --mode
):production
或 development
NoEmitOnErrorsPlugin
这样需要你手动使用的插件。我们在 package.json 中引入了对 sideEffects: false
的支持。当这个字段被添加时,它向 webpack 发出信号,表示被使用的库没有副作用。这意味着 webpack 可以安全地清除你代码中使用的任何重复导出模块。
例如,从 lodash-es
中单独导入 export
将会花费 ~223 KiB [压缩后的]。在 webpack 4 中,现在这只花费 ~3 KiB !
当你使用 ESModule 语法 import
JSON 时,webpack 会消除 “JSON Module” 中未使用的导出。对于那些已经将大量未使用模块的 JSON 导入到你的代码的应用,你会看到 你打包体积明显减小。
这意味着你可以使用 ES6 语法,压缩它,而无需使用转换器。
我们要感谢 UglifyJs2 的贡献者团队为支持 ES6 而付出的无私和辛勤的努力。这不是一件简单的任务,我们很乐意拜访你们的代码仓库来表达对你们的感谢和支持。
UglifyJS2 现在支持 ES6 JavaScript 语法!
历史上,JavaScript 是 webpack 中唯一的一流模块类型。这给那些不能高效的打包 CSS/HTML 的用户带来了很多尴尬的痛苦。我们完全从我们的代码库中抽象出了 JavaScript 特性,以允许这个新的 API。目前建成,我们现在有5个模块类型实现引入:
javascript/auto
: (在 webpack 3 默认启用) 启用了所有的 Javascript 模块系统:CommonJS,AMD,ESMjavascript/esm
: EcmaScript 模块,所有的其他模块系统不可用(默认 .mjs 文件)javascript/dynamic
: 只有 CommonJS 和,EcmaScript 模块不可用json
: JSON 数据,它可以通过 require 和 import 来引入使用(默认 .json 的文件)webassembly/experimental
: WebAssembly模块(当前为 .wasm 文件的实验文件和默认文件).wasm
, .mjs
, .js
和 .json
拓展文件来解析这个功能最让人兴奋的是,我们可以继续使用 CSS 和 HTML 模块模型 (4.x)。这将允许像 HTML 这样的功能作为你的入口点!
Webpack 现在默认支持任何本地 WebAssembly 模块的 import
和 export
。这意味着你也可以写加载器,让你可以直接 import
Rust,C++,C 和其他 WebAssembly 语言。
我们也删除了 CommonsChunkPlugin
,并默认启用了它的许多功能。另外,对于需要对其缓存策略进行细粒度控制的用户,我们已经添加了 optimization.splitChunks
和optimization.runtimeChunk
它们具有更丰富,更灵活的功能。
还有很多的功能 我们强烈建议你在我们的官方更新日志上查看所有。
正如所承诺的那样,我们将从今天开始等待一个月,然后再发布 webpack 4 稳定版。 这使我们的插件,加载器和集成生态系统有时间去测试,报告并升级到 webpack 4.0.0 中!
我们需要你帮助我们升级和测试这个测试版。我们今天测试的越多,我们就可以更快的分诊和识别任何可能出现的问题!
非常感谢所有帮助我们完成 webpack 4 的贡献者。正如我们所说,wepack 的成就是我们大家和生态系统的的共同努力造就的。
翻译:FateZeros
译文链接:https://juejin.im/post/5a72d569f265da3e3a6e2118
校对者:kangkai124、 MechanicianW