webpack 系列之—— externals 用法详解

2024-02-17 17:18:45

在前端开发中，我们经常会遇到需要在多个项目中复用代码的情况。例如，我们可能有一个通用的 UI 组件库，希望在多个项目中使用。或者，我们可能需要在不同的项目中使用相同的第三方库。此时，我们就需要考虑代码复用问题。

Webpack 是一个流行的前端构建工具，它提供了一种非常方便的代码复用机制：externals。Externals 允许我们在 webpack 配置文件中指定哪些模块不需要打包到最终的 bundle 中，而是直接从外部加载。这可以极大地减少 bundle 的体积，从而提高加载速度和性能。

Externals 的工作原理

Externals 的工作原理非常简单。当 webpack 在构建项目时，它会首先检查 webpack 配置文件中的 externals 选项。如果某个模块在 externals 选项中被指定，那么 webpack 就会跳过该模块的打包过程，而是直接从外部加载该模块。

Externals 的应用场景非常广泛。以下是一些常见的应用场景：

复用通用 UI 组件库：如果我们有一个通用的 UI 组件库，希望在多个项目中使用，那么我们可以将该组件库作为一个 externals 模块，然后在各个项目中直接从外部加载该组件库。这样就可以避免在每个项目中都重复打包组件库代码，从而减少 bundle 的体积和提高加载速度。
复用第三方库：如果我们需要在不同的项目中使用相同的第三方库，那么我们可以将该第三方库作为一个 externals 模块，然后在各个项目中直接从外部加载该第三方库。这样就可以避免在每个项目中都重复打包第三方库代码，从而减少 bundle 的体积和提高加载速度。
避免打包大型库：如果我们项目中需要使用一个非常大型的库，例如 jQuery，那么我们可以将该库作为一个 externals 模块，然后直接从 CDN 加载该库。这样就可以避免将大型库打包到 bundle 中，从而减少 bundle 的体积和提高加载速度。

要在 webpack 配置文件中使用 externals，我们需要在 externals 选项中指定需要从外部加载的模块。我们可以使用字符串或正则表达式来指定模块。例如，以下代码将从外部加载 jQuery 库：

externals: {
  jquery: 'jQuery'
}

如果我们想使用正则表达式来指定模块，那么我们可以使用以下代码：

externals: {
  '^@angular/.*': '@angular'
}

以上代码将从外部加载所有以 @angular/ 开头的模块。

在使用 externals 时，我们需要特别注意以下几点：

确保模块已经从外部加载 ：在使用 externals 时，我们需要确保模块已经从外部加载。否则，webpack 可能会找不到该模块，从而导致构建失败。
不要将所有模块都设置为 externals ：如果我们将所有模块都设置为 externals，那么 webpack 将不会打包任何代码，这会导致构建失败。因此，我们需要谨慎地选择要设置为 externals 的模块。
使用 externals 时可能会遇到一些问题 ：在使用 externals 时，我们可能会遇到一些问题，例如模块加载顺序问题、模块版本冲突问题等。我们需要仔细地处理这些问题，以确保应用程序能够正常运行。