第1186期Webpack v4 beta 版本发布

Posted 2021-04-29 前端早读课

前言

昨天期号忘记带了，不认真了。今天童鞋们，又该学习了。今日早读文章由@FEPulse 授权分享。

正文从这开始~

自从Webpack 3 发布之后，Webpack 社区承诺将用一个更长的开发周期来准备下一个重要版本，因此从去年 8 月份开始拉取下个版本的分支之后，大家都在期待经过如此隆重的开发，Webpack 下个版本会增加哪些新提升？就在昨天 Webpack 社区发布了 Webpack v4.0.0-beta.0 版本，小编在这里带大家先睹为快吧。

如何安装 Webpack v4.0.0-beta.0
yarn add webpack@next webpack-cli —dev
或者
npm install webpack@next webpack-cli —save-dev

性能提升

1. 在 production 环境中，Webpack 将自动使用 UglifyJS 插件来并行化编译和缓存来减少工作量。

2. 将插件系统提升到一个新的版本，以保证事件钩子 Event Hooks 和事件处理函数 Event Handlers 是单一形态的。

3. Webpack 放弃对 Node v4 的支持以支持大量 ES6 语法和数据结构。

更好的默认配置-零配置

例如 Webpack 4 将自动默认设置为 entry 是 ./src/, output 是 ./dist，官方也声明在 4.x 和 5.0 版本将继续优化默认配置。

更好的默认配置-环境模式

必须从 production 和 development 两种模式选择其中一个，生产环境更加关注优化你的项目产出，而开发环境则优化开发速度和开发体验。

SideEffects 选项

Webpack v4 支持 sideEffects: false 设置来优化导出的依赖包，例如 Lodash-es 从 ~223 KiB 的花销降低到 ~3 KiB。

支持JSON并删减模块树

Webpack 能够对 JSON Module 进行分析并删减其中无用的部分。

更新 UglifyJS2

意味着你可以使用 ES6 语法在编译器之前对代码进行优化。

模块类型引入 .mjs

Webpack 4 引入五种模块类型来支持从代码中提取 javascript 代码

1. javacript/auto : 从 CommonJS，AMD，ESM 模块系统中提取 JavaScript 代码。

2. javascript/esm : 从 EcmaScript 模块系统中提取 JavaScript 代码。

3. javascript/dynamic : 只支持从 CommonJS 模块系统中提取 JavaScript 代码。

4. json : 支持从 .json 文件中提取 JavaScript 代码。

5. webassembly/experimental : 支持从 WebAssembly 模块系统中提取 JavaScript 代码。

支持 WebAssembly 字节码技术

WebAssembly 比 JavaScript 具有更好的性能，也使得能对 Rust，C++ 等 WebAssembly 语言能够添加相应的加载器 Loader 进行处理。

去除 CommonsChunkPlugin 插件

Webpack 4 去除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks 和 optimization.runtimeChunk。

腾讯大牛亲自操刀制作的前端NEXT学位课程第五期招生正在火热进行中！
感兴趣的小伙伴快扫描下方二维码了解课程详情吧！