在 Webpack 中，`externals` 是一个配置选项，用于指定哪些模块应该被视为外部依赖，而不会被打包到最终的输出文件中。 当你希望引入的库已经通过其他方式（如 CDN）加载，并且你不希望将其打包进你的构建文件时，可以使用 `externals`，以减小构建文件的体积并加快加载速度。 在配置文件中，你可以将 `externals` 属性设置为一个对象，其中键表示要排除的模块名，值表示如何在运行时访问这些模块的方式。常见的值类型有以下几种： - 字符串：表示该模块通过全局变量进行访问。例如，`'lodash'` 表示你在运行时通过全局变量 `lodash` 来访问这个模块。 - 对象：使用键值对的形式，表示以何种方式访问模块。键是模块名，值是在运行时访问这个模块的方式。例如，`{ 'react': 'React', 'react-dom': 'ReactDOM' }` 表示你在运行时通过全局变量 `React` 和 `ReactDOM` 来访问这两个模块。 下面是一个示例配置，展示了如何使用 `externals`： ```javascript module.exports = { // ... externals: { jquery: 'jQuery', lodash: '_', }, }; ``` 上述配置将告诉 Webpack 将 `jquery` 和 `lodash` 视为外部依赖，并在构建过程中不会将它们打包进最终的输出文件中。相反，它们将通过全局变量 `jQuery` 和 `_` 进行访问。 使用 `externals` 可以帮助减小构建文件的体积，提高应用程序的加载速度，同时也适用于一些特殊的场景，如使用第三方库或将模块作为外部插件使用等。