Webpack 的 externals 配置使用方法详解
Webpack 是一款非常流行的前端构建工具，它能够将多个文件打包成一个文件，以减少 HTTP 请求的次数，提高 web 应用的性能。在使用 Webpack 进行打包时，我们可能会遇到一些第三方库或包（例如 jQuery、lodash 等），为了减小打包后的文件大小，我们可以将这些库排除在 Webpack 打包范围之外，即使用 externals 配置。
Externals 配置是指在 Webpack 配置文件中设置的一个选项，用于将某些依赖包排除在外，这些包通常在运行时通过全局变量方式引入，例如在引用 jQuery 库时，如果使用全局变量方式引用，那么可以将 jQuery 库排除在 Webpack 打包之外。
下面我们将详细介绍如何使用 externals 配置。
首先，在 Webpack 配置文件中，需要在 externals 中设置依赖包的名称和全局变量名称，例如：
module.exports = {
externals: {
'jquery': 'jQuery',
'lodash': '_'
},
// other webpack options...
}上述配置是告诉 Webpack 在打包时不需要包含 jquery 和 lodash 包，这两个包在运行时通过 jQuery 和 _ 全局变量引入。这样可以减轻打包后的文件体积。
但是，有时我们需要在打包后的文件中引入一个外部依赖包的指定部分，而不是整个库。例如，我们只需要 lodash.js 库中的某个函数，而不是整个库。在这种情况下，我们可以通过以下方式来设置 externals：
-- -------------------- ---- -------
-------------- - -
---------- -
--------- -
--------- ---------
---------- ---------
---- ---------
----- ---
-
--
-- ----- ------- ----------
-上述配置是告诉 Webpack 在打包时不需要包含 lodash 包，需要通过 commonJS、AMD 或者 root 暴露出本库，通过这些配置会使用 lodash 指定的方式引入某个部分。
使用 externals 配置时需要注意以下几点：
如果你的依赖包没有通过外部变量方式引入，那么你需要安装并引入该包。
如果你的依赖包是通过外部全局变量引入的，那么需要在 externals 中设置依赖包名称和全局变量名称。
如果你需要引用外部依赖包的指定部分，需要在 externals 中配置相关选项。
总结一下，externals 配置是用来在 Webpack 中引入指定的库或者包，并将它们排除在打包范围外的一种设置方式。它能够让你更有效地控制你的代码打包体积，提升 web 应用性能。
示例代码：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -----------
------- -
--------- -----------
--
---------- -
--------- --------
-
-
-- ------
------ - ---- ---------
---------------------------- --------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492699b48841e9894036f45