在开发前端应用过程中，我们往往会依赖第三方库和包。这些第三方库在生产环境中，我们希望能从 CDN 加载，这样可以减小我们自己的服务器的负担，同时也能加快应用的加载速度。
Webpack 是一个非常流行的前端打包工具，它有一个选项叫做 externals，可以帮助我们实现从 CDN 加载第三方库的功能。本文将介绍 externals 的用法，以及如何在实际项目中应用它。
什么是 externals
当我们使用import或 require 语句去引入一个模块时，Webpack 会将这个模块打包到 bundle 中。而有些模块是我们不希望被打包到 bundle 中的，我们希望它们能被从外部引入，这时候就可以使用externals选项。
通过使用externals选项，我们可以告诉 Webpack，某个模块不需被打包，而是在运行时从外部获取。我们可以通过简单的配置将这些模块从 bundle 中剔除出去，达到减小 bundle 大小、优化打包速度的目的。
如何配置 externals
我们以 lodash 库为例，来看如何配置 externals。
在我们的项目中使用 lodash 库时，安装依赖后，使用 import语句就可以引入：
import { get } from 'lodash';
console.log(get({ a: { b: 2 } }, 'a.b'));lodash 库的全局变量名为 _，我们可以在 HTML 中通过 CDN 直接引用它：
<script src="//cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
为了让 Webpack 将 lodash 库从 bundle 中剔除出去，修改我们的 Webpack 配置如下：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
---------- -
------- ----
--
--externals 选项是一个对象，其中的属性表示库的名称，值表示从外部引入的全局变量。
在该配置中，我们将 lodash 的库名称 lodash 映射到了全局变量 _。这样，Webpack 就知道从哪里获取 lodash 了，而不会将它打包进 bundle 中。
如何在实际项目中应用 externals
在实际项目中，使用externals选项需要注意以下几点：
需要通过
<script>标签引用 CDN 中的库，确保在运行时能够正确地获取到所需模块。在引用某个库时，需要知道全局变量名称。这些信息可以在库的文档中找到。
如果你的项目下的某个模块依赖于
externals中的某个库，那么你需要确保这个库在运行时能够正确加载，否则会出现报错。
示例代码
下面是一个完整的 Webpack 配置文件，其中配置了从 CDN 加载 lodash 库。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
---------- -
------- ----
--
--其中 src/index.js 文件的内容如下：
import { get } from 'lodash';
console.log(get({ a: { b: 2 } }, 'a.b'));在 HTML 文件中引用 CDN 中的 lodash 库：
<body> <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <script src="./dist/bundle.js"></script> </body>
在运行应用时，我们会看到控制台输出了 2，说明我们成功地使用了 .externals 配置选项，从 CDN 加载了 lodash 库。
总结
在本文中，我们介绍了 Webpack 中的 externals选项，它能够让我们从 CDN 加载第三方模块，最大程度地减小 bundle 的大小。我们还通过示例代码演示了如何在实际项目中使用。
希望本文可以帮助你更好地理解 Webpack 中的 externals，并能够在实际项目中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472eb64968c7c53b0076d52