随着前端项目的不断发展，前端工程化已成为必不可少的一环。而 webpack 作为前端工程化时代的代表性工具，一直在不断的演进和进化。在 2020 年 10 月份，webpack 5 正式发布，相较于之前的版本带来了诸多的新功能和特性。
在本文中，我们将一一介绍 webpack 5 的特性，并提供升级和优化建议，让你更好的了解如何使用 webpack 5 来构建和优化你的前端项目。
webpack 5 的新特性
模块联邦
模块联邦是 webpack 5 最重要的新特性之一，可以同时加载多个独立的 webpack 构建，并在运行时共享模块。这意味着你可以在不同的团队间共享代码，或是将不同的应用组合在一起，构建出更加复杂的系统。
实现模块联邦基于微前端的理念，不同的应用可以独立运行，并在需要的时候动态地加载其他应用的代码，从而达到代码复用和快速构建应用的目的。
使用模块联邦需要设置一个共享模块规则，并将其暴露出来，指定哪些模块可以被动态加载。如下例子：
-- -------------------- ---- -------
-- ----------------------
----- ---------------------- - ----------------------------------------------------
-------------- - -
-------- -
--- ------------------------
----- -------
-------- -
------- --------------------------------------------
------- --------------------------------------------
--
------- -
------ - ---------- ---- --
------------ - ---------- ---- -
--
---
--
---- -------------------- ---- -------
-- ---------------------
----- ---------------------- - ----------------------------------------------------
-------------- - -
-------- -
--- ------------------------
----- -------
-------- -
----------- ---------------
--
------- -
------ - ---------- ---- --
------------ - ---------- ---- -
--
---
--
--Tree Shaking 更加智能
在 webpack 5 中， Tree Shaking 精度得到了提升，更准确的排除了无用的代码。webpack 5 可以在编译时分析代码依赖关系，更好的处理动态导入和其它情况下的 Tree Shaking。
同时，webpack 5 新增了 sideEffects 属性，用于标记无副作用的代码并且告诉 webpack 可以安全的进行 Tree Shaking，这样就可以排除一些无用的代码，提升应用的加载速度。
{
"name": "example-project",
"sideEffects": [
"*.css",
"*.scss",
"*.styl"
]
}支持原生 ES 模块
webpack 5 开始支持原生的 ES 模块语法，这意味着你可以在项目中直接使用 import 和 export 关键字来进行模块化开发，不需要转换成 CommonJS 或其他的模块语法。
相比之前，原生 ES 模块可以提供更好的性能和可读性。webpack 5 会自动处理这些模块并且放入 Graoh 中作为入口点的其中之一，不需要进行明确的入口声明。
自动刷新速度提升
webpack-dev-server 环境下，webpack 5 改进了刷新速度，因为之前的版本需要先完全编译一遍代码，然后再将编译后的代码输出到浏览器上，有一定的延迟。而从 webpack 5 开始，你可以通过实验性的实现 webpack-dev-server --no-live-reload 选项来禁用 live reload。
缩小构建的体积
webpack 5 可以通过多种方式来压缩最终的输出文件。通过设置mode属性可以指定环境的情况来开启压缩文件的处理。使用 TerserWebpackPlugin、OptimizeCssAssetsWebpackPlugin 以及 HtmlWebpackPlugin 也可以处理额外的优化步骤。
升级 & 优化建议
为了更好的使用 webpack 5，你需要考虑升级和优化你的现有代码。
升级
升级到 webpack 5 不是无风险的，需要确保升级前做了充分的测试，以免出现兼容性问题。
将 webpack 5 与其他工具升级，例如 webpack-dev-server 和 webpack-cli，以确保最新的版本兼容性。
在升级之前，请考虑移除已经弃用的配置选项，例如以下几个：
-- -------------------- ---- -------
-
------- -
------------------------------ ---------------------------------------
-------------------------------------- ---------------------------------------
--
------- -
-------- ---------
--
------------- -
------------- -----
-
-在升级过程中，可以使用 webpack-cli 的 migrate 子命令转换旧的 webpack 配置。
$ npx webpack-cli migrate path/to/webpack.config.js
优化
升级完成之后，还需要进行一些优化。
使用 Tree Shaking 和代码分割技术，尽量充分利用 webpack 5 的新特性，将没有用到的代码剔除出去。
合理地使用模块联邦，可以大大节省代码量，并提高应用性能。
使用原生的 ES 模块语法，可以提高代码的可读性，并充分利用 webpack 5 的优化特性。
在提高体积方面，优先使用轻量的第三方库以及使用 gzip 压缩等技术，以降低文件的大小。同时，升级到 webpack 5 可以使用新功能在构建时间上实现更多的优化，例如使用多进程编译等方式。
结论
webpack 5 带来的新特性和优化使得前端工程化的开发过程更加简单和高效。在了解了 webpack5 的新特性和优化之后，你可以尝试升级你的现有项目并应用这些新特性和优化方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674a8920a1ce0063549373d1