面试题：Webpack 中如何通过 externals 配置避免重复打包某些库

原理

在 Webpack 中，externals 配置项的作用是告诉 Webpack 某些模块不应该被打包进输出文件，而是在运行时从外部环境获取。当 Webpack 打包时遇到 externals 中指定的模块，它不会将该模块的代码包含在打包结果中，而是在生成的 bundle 中保留一个引用，运行时会从外部环境中查找该模块。这样可以避免重复打包已经存在于外部环境（例如 CDN 引入的库）的库，减小打包文件的体积，提高加载性能。

具体配置方法

在 Webpack 配置文件（通常是 webpack.config.js）中配置 externals，它可以是对象、数组或函数形式。

对象形式：

module.exports = {
  // 其他配置...
  externals: {
    'jquery': 'jQuery'
  }
};

上述配置表示，当 Webpack 遇到引入 jquery 的模块时，不会将 jquery 打包进去，而是期望在运行时从全局变量 jQuery 中获取 jquery 模块。

数组形式：

module.exports = {
  // 其他配置...
  externals: [
    function(context, request, callback) {
      if (/^jquery$/.test(request)) {
        return callback(null, 'jQuery');
      }
      callback();
    }
  ]
};

这里通过一个函数形式的配置，当请求的模块是 jquery 时，告知 Webpack 运行时从全局变量 jQuery 获取。

不同类型项目中的应用场景

单页应用（SPA）

在单页应用中，通常会在 HTML 文件头部通过 CDN 引入一些常用库，如 jQuery。例如：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>SPA</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>

</html>

Webpack 配置如下：

module.exports = {
  // 其他配置...
  externals: {
    'jquery': 'jQuery'
  }
};

这样，在 SPA 项目中，打包时不会将 jQuery 重复打包进 bundle.js，运行时 bundle.js 会从全局的 jQuery 变量获取 jQuery 功能，减小了 bundle.js 的体积，加快了页面加载速度。

多页应用（MPA）

在多页应用中，不同页面可能都需要用到某些库，如 jQuery。同样可以在每个页面的 HTML 文件中通过 CDN 引入 jQuery，然后在 Webpack 配置中设置 externals。例如每个页面的 HTML 类似这样：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Page1</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <div id="page1-content"></div>
  <script src="page1.bundle.js"></script>
</body>

</html>

Webpack 配置：

module.exports = {
  // 其他配置...
  externals: {
    'jquery': 'jQuery'
  }
};

这样在多页应用中，每个页面的打包文件都不会重复包含 jQuery，既减小了每个页面打包文件的体积，又保证了各页面能正常使用从 CDN 引入的 jQuery。

星途面试题库

面试题：Webpack 中如何通过 externals 配置避免重复打包某些库

知识考点

面试题答案

原理

具体配置方法

不同类型项目中的应用场景

单页应用（SPA）

多页应用（MPA）