webpack：external的强大妙用，优化代码体积大招

好的，根据你的输入“webpack 中 external 的使用”，我将生成一篇专业级别的文章。为了让文章看起来更具真实感，我会尽量避免使用人工智能特有的固定用语和模板。

webpack 中 external 的强大妙用，优化代码体积大招

webpack 是一款非常流行的前端构建工具，它可以帮助我们管理和打包代码。在 webpack 中，external 是一个非常有用的配置项，它可以帮助我们优化代码体积。

什么是 external？

external 允许我们告诉 webpack 不要将某些模块打包到 bundle 中。这些模块通常是已经存在于运行时环境中的全局变量。通过排除这些模块，我们可以减少 bundle 的体积。

为什么要使用 external？

使用 external 有以下几个好处：

• 优化代码体积： 通过排除全局变量，我们可以显著减小 bundle 的体积。
• 提高性能： 由于外部模块已经在运行时环境中，因此无需在加载 bundle 时再次加载它们，这可以提高应用程序的性能。
• 避免重复： 如果同一个模块被多个组件使用，则使用 external 可以避免将其重复打包到 bundle 中。

如何使用 external？

在 webpack 配置文件中，我们可以通过以下方式使用 external：

externals: {
  // 模块名称: 全局变量名称
  'jquery': 'jQuery'
}

例如，如果我们希望将 jQuery 从 bundle 中排除，我们可以使用以下配置：

externals: {
  'jquery': 'jQuery'
}

使用 external 时需要注意什么？

使用 external 时需要注意以下几点：

• 确保模块在运行时环境中可用： 在排除模块之前，请确保它在运行时环境中可用。
• 使用长路径名： 如果模块的路径名很长，请使用长路径名而不是相对路径名。
• 使用 require.resolve()： 在某些情况下，我们需要使用 require.resolve() 来显式地解析模块的路径。

示例

以下是一个使用 external 优化代码体积的示例：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ...
  externals: {
    'jquery': 'jQuery'
  }
  // ...
};

通过使用 external，我们可以将 jQuery 从 bundle 中排除，从而显著减小 bundle 的体积。

结论

external 是 webpack 中一个非常有用的配置项，它可以帮助我们优化代码体积。通过排除全局变量，我们可以显著减小 bundle 的体积，提高性能，并避免重复。在使用 external 时，我们需要确保模块在运行时环境中可用，并使用长路径名或 require.resolve() 来显式地解析模块的路径。