Webpack5 是目前 Webpack 体系中的最新版本，它带来了很多新特性和性能优化。本文将详细介绍 Webpack5 的各项升级和使用，让你更好地了解 Webpack5，并帮助你升级到最新版本。
Webpack5 的新特性
Webpack5 提供了很多新特性，以下是一些值得关注的内容：
持久化缓存
Webpack5 引入了持久化缓存，利用了 Webpack 在编译时生成的 hash 值，以缩短开发者每次编译的时间。这意味着当你在开发过程中需要频繁编译时，Webpack5 可以显著地提高编译速度。
支持顶层的 await
Webpack5 支持顶层的 await，可以让我们在模块顶层使用 await 关键字，这样就可以非常方便地处理异步逻辑了。
模块热替换（HMR）的改进
Webpack5 提供了更好的模块热替换体验，现在可以直接使用 HMR API 进行热替换代码，不再需要添加额外的模块。
Webpack5 的升级
下面是升级到 Webpack5 的步骤。
安装 Webpack5
首先，要升级到 Webpack5，我们需要升级 Webpack 的安装包。
npm install webpack@5 webpack-cli -D
注意，webpack-cli 这个包现在也需要更新。
修改配置文件
Webpack5 与 Webpack4 相比较，没有太多的变化。我们只需要修改几个配置项即可升级到 Webpack5。
mode
在 Webpack5 中，mode 属性有了一个新的值 producton-nomodule，这个值用于生成现代化的代码。此外还有一个 development-nomodule 的值，它用于生成现代化的开发环境代码。
devtool
在 Webpack5 中，devtool 属性有了很大的改进和优化。比如，source-map 现在可以自动选择一个更快更强的算法来生成更小更快的源码映射。如果你需要自己配置，可以使用 options 选项来控制。
optimization
在 Webpack5 中，splitChunks 配置项的默认值改为了 all，可以对所有代码进行拆分。同时，runtimeChunk 现在默认是一个单独的文件，如果你想要将运行时代码内联到 HTML 中，可以把它设置为 single。
修改 Loader 和 Plugin
如果你当前的项目中使用了自定义的 Loader 或 Plugin，那么可能需要进行一些修改。Webpack5 中自带了一些新的工具，可以让 Loader 和 Plugin 更加容易地进行开发和维护。
Loader
Webpack5 的 Loader 有一个新的选项 type，它用于指定 Loader 的类型是 JavaScript 还是 WebAssembly。
-- -------------------- ---- -------
------- -
------ --
----- --------
---- -
------- ---------------
----- -----------------
-
--
-Plugin
Webpack5 的 Plugin 有一个新的选项 filter，它用于控制 Plugin 的触发时间。
-- -------------------- ---- -------
----- -------- - -
--------------- -
------------------------------------------ ------------- -- -
-- -------------
------------------------------------------------ -- -- -
-- ---
---
---
-
-
-------------- - -
-------- -----------
------------ -
------ -----
--
------------- -
--------- -----
---------- ---- ---------------------
-
--示例代码
下面是一个使用了 Webpack5 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- --------------------------
----- ----------------------- -------
--
------------- -
------------ -
------- -----
-
--
-------- -------------
-------- -
--- -------------------
--------- ----------------
--
-
--总结
本文详细介绍了 Webpack5 的新特性和升级步骤，希望可以帮助大家更好地了解和使用 Webpack5。同时，本文还提供了示例代码供大家参考。记得遵循官方文档进行升级，并注意每个版本的变化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645af3d7968c7c53b0d4fb59