Webpack 被称为是目前最流行的前端打包工具之一，它可以将各种不同的资源打包成 JavaScript 文件，成为了各大前端框架或者库中必不可少的一项工具。在当下，Webpack 已经进入了它的第五个版本，并且带来了一些新的特性和改进，下面我们就来详细介绍一下它的更新内容以及新特性的使用方法。
新特性介绍
模块联邦
Webpack5 最大的更新特性就是引入了模块联邦（Module Federation），通过这一特性，我们可以在多个独立的 Webpack 应用中共享模块，这大大提高了我们的开发效率以及代码的复用性。下面是一个简单的示例。
我们有两个独立的应用，他们都使用了 React、React-DOM、以及 Lodash 库，我们使用模块联邦就可以将这些模块抽离出来，并共享给两个应用，使得它们变得更为高效。
-- -----------------
-------------- - -
------ -
----- ------
----- ------
--
-------- -
--- ------------------------
----- ---------
-------- - ----- ------ ----- -------- --
--------- -----------------
-------- -
---------- -------------------------
-------------- -----------------------------
----------- --------------------------
--
---
--
--
-- ----- -- --- ----
------ - ------ ---------- ------ - ---- ---------更快的构建速度
Webpack 在5版本中还引入了更快的构建速度。复用已经被构建好的模块，其他新的模块也只需要增量更新，巨大的提高了构建速度。并且内置的缓存机制也能够帮助我们更快的执行构建命令，这也是我们在新版 Webpack 里面体验到的，最为重要的优化。
零配置支持
Webpack 在5版本中也可靠了零配置支持，项目默认配置已经足够执行大部分应用的打包需求，不再需要繁琐的配置文件。这严重降低了对新手的门槛，使得他们更容易上手Webpack工具。
Chunk 分离和优化
Webpack 在 5 版本中也带来了更智能的 Chunk 分离和优化策略。我们经常会碰到一些包含了大量代码块的文件，这会影响我们的应用性能。Webpack5 引入了 side-effect-free（无副作用代码）用来优化 chunk 分离策略，它可以更加智能的优化我们的打包策略，使得文件处理更加流畅，并且降低了多个应用间的干扰。
如何使用
安装
我们可以通过 NPM 或者 Yarn 进行 Webpack 的安装。
--- ------- ------- ----------- -- - -- ---- --- ------- ----------- --
零配置支持
Webpack 在5版本中提供了零配置支持，但是我们需要在项目中引入 webpack 和 webpack-cli。
--- -------
配置文件
虽然 Webpack 已经支持了零配置功能，但是我们在实际开发中，还是需要引入配置文件。我们需要在项目根目录下面创建一个名为 webpack.config.js 的文件，并在其中书写配置。
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
--模块联邦
Webpack 5 中的模块联邦，需要在配置文件中引入 ModuleFederationPlugin并进行相关配置。
-- ---- - -----------------
-------------- - -
------ -----------------
------- -
--------- -----------------
-------- - ----- ------ ----- ------ --
--
-------- -
--- ------------------------
----- -------
-------- - ----- ------ ----- ------ --
--------- -----------------
-------- -
------------ -------------------
--
---
--
--
-- ---- - -----------------
-------------- - -
------ -----------------
------- -
--------- -----------------
-------- - ----- ------ ----- ------ --
--
-------- -
--- ------------------------
----- -------
-------- - ----- ------ ----- ------ --
--------- -----------------
-------- -
----------- ------------------
--
------- -----------
---
--
--更快的构建速度
Webpack 5 中还引入了新的构建缓存机制，可以更快的执行构建命令。只需要在构建命令后面添加 --cache 或者 -C 就可以打开缓存加速。
--- ------- ------- - - --- ------- --
Chunk 分离和优化
Webpack 5 中提供了各种优化策略，并且修改配置更加简单了。我们只需要在 optimization 属性下面添加相应的配置。
-------------- - -
------------- -
--------- -----
------------------- -----
------------ -----
------------ -----
--
--结论
Webpack 5 为我们提供了更多的特性和功能，使得我们更加高效的进行开发和构建。通过学习这些新特性，我们可以更好地运用它来创造更加出色的产品，提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6737c124317fbffedf0c3b5b