Webpack 的 externals 配置有什么作用？

推荐答案

Webpack 的 externals 配置用于防止将某些 import 的包打包到最终的 bundle 中，而是通过外部环境（如全局变量、CDN 等）来引入这些依赖。这样可以减少打包体积，优化加载性能。

本题详细解读

1. externals 的作用

externals 配置允许你在打包时排除某些依赖，这些依赖通常是通过 <script> 标签或其他方式在运行时引入的。通过这种方式，Webpack 不会将这些依赖打包到最终的输出文件中，而是保留对它们的引用。

2. 使用场景

• 使用 CDN 引入库：例如，如果你通过 CDN 引入了 jQuery，可以在 externals 中配置 jquery，这样 Webpack 就不会将 jQuery 打包到最终的 bundle 中。
• 避免重复打包：在大型项目中，某些库可能已经被其他模块引入，使用 externals 可以避免重复打包这些库。

3. 配置方式

externals 可以配置为字符串、对象或函数。常见的配置方式如下：

3.1 字符串形式

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

在这个例子中，jquery 模块将通过全局变量 jQuery 来引入。

3.2 对象形式

-- -------------------- ---- -------
-------------- - -
  ---------- -
    ------- -
      --------- ---------
      ---- ---------
      ----- ---
    -
  -
--

这种配置方式允许你为不同的模块系统指定不同的引入方式。

3.3 函数形式

module.exports = {
  externals: function(context, request, callback) {
    if (/^lodash/.test(request)) {
      return callback(null, 'commonjs ' + request);
    }
    callback();
  }
};

通过函数形式，你可以根据请求的模块动态决定是否将其作为外部依赖。

4. 注意事项

• 确保外部依赖可用：使用 externals 时，必须确保在运行时环境中这些外部依赖是可用的，否则会导致运行时错误。
• 模块系统的兼容性：在使用 externals 时，需要注意模块系统的兼容性，确保外部依赖的引入方式与项目中的模块系统一致。