介绍
在前端开发中，使用 Webpack 构建工具能够将多个模块打包成一个或多个文件。这些模块可能是自己编写的代码，也可能是来自其他依赖包中的代码。当我们需要将多个模块打包成一个文件时，我们往往需要将这些依赖包也一同打包进去。但是如果依赖包非常大，就会导致打包文件的大小非常大，同时也会使页面加载速度变慢。
Webpack-externals-plus-plugin 是一个 Webpack 插件，它可以将一部分依赖包从打包文件中分离出来，由浏览器从 CDN 加载依赖包，这样可以大大减小打包文件的大小，提高页面加载的速度。
安装与配置
在项目中，使用 npm 安装 webpack-externals-plus-plugin：
npm install webpack-externals-plus-plugin --save-dev
在 webpack 配置文件中，添加如下代码：
-- -------------------- ---- -------
----- -------------------------- - -----------------------------------------
-------------- - -
-- -----
-------- -
--- ----------------------------
---------- --
------- --------
------ -----------------------------------------------------------------------------
------- --------
-- -
------- ------------
------ -------------------------------------------------------------------------------------
------- -----------
--
--
-
--其中，externals 是一个数组，它包含了需要从打包文件中分离出来的依赖包的信息。每个依赖包信息都包括以下三个属性：
module：依赖包的名称。entry：依赖包在 CDN 上的地址。global：依赖包的全局变量名称。
示例代码
假设我们需要将一个使用 React 和 Redux 构建的单页面应用打包成一个文件，我们可以使用如下的 webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- -------------------------- - -----------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ----------------
--
-
----- ---------
---- ----------------------------- -------------
-
-
--
-------- -
--- -------------------
--------- ---------------------
---
--- -----------------------
--- ----------------------------
---------- -
-
------- --------
------ -----------------------------------------------------------------------------
------- --------
--
-
------- ------------
------ -------------------------------------------------------------------------------------
------- -----------
--
-
------- --------
------ -------------------------------------------------------------
------- --------
--
-
------- --------------
------ -------------------------------------------------------------------------
------- -------------
-
-
--
-
--在 HTML 文件中，需要手动将依赖包的全局变量名称添加到 script 标签的 window 对象中，如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------ ---------------
-------
------
---- ----------------
-------------------- - --------------- - ------------ - ----------------- - --------------
------- ---------------------------
-------
-------结束语
Webpack-externals-plus-plugin 插件可以帮助我们将一部分依赖包从打包文件中分离出来，大大减小打包文件的大小，提高页面加载的速度。在实际项目中，我们可以将常用的依赖包打包到一个公共的 bundle 文件中，由浏览器缓存该文件，以提高页面的响应速度。同时，我们还可以将一些静态资源，例如字体、图片等分离出来，由 CDN 加载，以进一步提高页面的加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563d781e8991b448e1304