前言
对于使用 Angular 开发的前端应用来说，引入第三方库是必不可少的。不过，直接在 Angular 应用中引入第三方库会导致应用体积过大，影响页面加载速度。因此，我们可以考虑将这些库打包成单独的文件，以减小文件体积。而 webpack-angular-externals 就是一个帮我们将第三方库打包成单独文件的 npm 包。本文将详细介绍 webpack-angular-externals 的使用方法。
安装
首先，我们需要将 webpack-angular-externals 安装到我们的项目中。可以通过 npm 安装：
npm i -D webpack-angular-externals
使用
接下来，我们需要在 webpack 的配置文件中使用 webpack-angular-externals。下面是一个示例 webpack 配置文件：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- ---------------------- - -------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
----------- ------- ------
--
------- -
------ -
- ----- -------- ------- ----------- -
-
--
-------- -
--- ------------------------
------------- -
------- -
-------
----------------
------------------
----------------------------
-----------------
-
-
--
-
-以上 webpack 配置文件中，我们将 webpack-angular-externals 导入到了 webpack 配置文件中，并通过 plugins 属性将其引入。
配置
webpack-angular-externals 的配置很简单，只需要传入一个 commonChunks 对象，用来描述需要引入的第三方库：
-- -------------------- ---- -------
--- ------------------------
------------- -
------- -
-------
----------------
------------------
----------------------------
-----------------
-
-
--在以上配置中，我们将 rxjs、@angular/core、@angular/common、@angular/platform-browser 和 @angular/router 这几个库打包到名为 vendor 的文件中。
示例
以下是一个使用 webpack-angular-externals 的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- ----------- ------- ------ --------------------- ------- --------------------------- ------- --------------------------- ------- -------
在以上示例中，我们在页面中引入了 vendor.js 文件和 bundle.js 文件。其中，vendor.js 文件包含了所有需要的第三方库，bundle.js 文件则包含了我们的应用逻辑。
总结
通过 webpack-angular-externals，我们可以将第三方库打包成单独的文件，从而减小应用体积，提高页面加载速度。使用该 npm 包，只需要简单的配置，便能快速地实现此功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60939