Webpack externals 配置：让您的应用程序更精简、更灵活

概述

Webpack externals 配置是一个高级功能，它允许您将某些依赖项从应用程序的包中排除。这通常用于排除全局库，如 jQuery 或 React，因为它们可能已经在运行时环境中可用。通过使用 externals，您可以减少包的大小，并提高应用程序的性能。

使用场景

您可能希望使用 externals 的一些常见场景包括：

• 您正在使用全局库，如 jQuery 或 React。 这些库通常已经包含在大多数现代浏览器中，因此没有必要将它们包含在您的包中。
• 您正在构建一个库或组件，并将与其他应用程序一起使用。 在这种情况下，您可能不希望将您的库的依赖项包含在其他应用程序的包中。
• 您正在构建一个需要在不同环境中运行的应用程序。 在这种情况下，您可能希望能够在不重新构建应用程序的情况下切换依赖项的版本。

配置 Externals

要配置 externals，您需要在 Webpack 配置文件中添加一个 externals 属性。externals 属性的值可以是一个字符串、一个数组或一个函数。

• 字符串： 如果您要排除单个库，您可以使用字符串。例如，以下配置将排除 jQuery：

externals: {
  jquery: 'jQuery'
}

• 数组： 如果您要排除多个库，您可以使用数组。例如，以下配置将排除 jQuery 和 React：

externals: {
  jquery: 'jQuery',
  react: 'React'
}

• 函数： 如果你想动态地排除库，你可以使用一个函数。例如，以下配置将排除任何以 "@" 开头的库：

externals: function(context, request, callback) {
  if (request.indexOf('@') === 0) {
    return callback(null, 'commonjs ' + request);
  }
  callback();
}

注意事项

在使用 externals 时，需要注意以下几点：

• 确保您排除的库在运行时环境中可用。 如果库不可用，您的应用程序将无法运行。
• 不要排除您正在使用的库的子依赖项。 这可能会导致您的应用程序无法运行。
• 如果您正在构建一个库或组件，请确保您在文档中注明您排除的库。 这将帮助其他开发人员了解您的库的依赖项。

结论

Webpack externals 配置是一个强大的工具，可以让您的应用程序更精简、更灵活。通过使用 externals，您可以减少包的大小，并提高应用程序的性能。如果您正在使用全局库，或者您正在构建一个库或组件，那么您应该考虑使用 externals。

常见问题解答

• 问：我该如何知道哪些库可以排除？
  • 答：您可以查看库的文档或源代码来确定它是否可以排除。您也可以使用诸如 webpack-externals-plugin 之类的工具来帮助您确定哪些库可以排除。
• 问：我该如何排除一个库的子依赖项？
  • 答：您无法直接排除一个库的子依赖项。但是，您可以使用诸如 webpack-subresource-integrity 之类的工具来确保您的应用程序只加载它信任的依赖项。
• 问：我该如何在文档中注明我排除的库？
  • 答：您可以创建一个名为 "dependencies.md" 的文件，并在其中列出您排除的库。您也可以在您的项目的 README 文件中注明您排除的库。