externals 配置

externals 配置是在 webpack 中常用的一种配置选项，用于将某些依赖声明为外部依赖，而不是打包进最终的输出文件中。这样可以避免将一些较大的依赖打包进输出文件，从而减小输出文件的体积，提高项目的加载速度。

externals 配置可以是一个字符串、一个数组或者一个对象。其中，当 externals 配置为字符串时，该字符串表示对应模块的全局变量名；当 externals 配置为数组时，数组中的每个元素表示对应模块的全局变量名；当 externals 配置为对象时，对象的键表示对应模块的名称，值表示对应模块的全局变量名。

一个典型的 externals 配置示例：

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

上述配置表示将 jQuery 声明为外部依赖，并将其对应的全局变量名设置为 jQuery。这样，在打包时，webpack 就会忽略对 jQuery 的处理，而将其作为外部依赖引入。

相关问题

使用webpack中的externals配置项如何配置

externals配置项用于配置那些不需要打包进应用程序中的第三方依赖。

在webpack配置文件中，可以使用以下方式配置externals:

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

上面的配置表示jquery模块将不会被打包进应用程序中，而是在运行时通过全局变量jQuery来访问。

你也可以使用一个函数来配置externals，比如:

module.exports = {
  externals: function(context, request, callback) {
    if (request === 'lodash') {
      return callback(null, '_');
    }
    callback();
  }
}

上面的配置表示lodash模块将不会被打包进应用程序中，而是在运行时通过全局变量_来访问。

webapck4的Externals的array配置

Webpack 4 中的 `externals` 配置主要是用于告诉 Webpack 应该从外部库（如已经包含在浏览器全局中的库，或者是CDN上直接可用的库）而不是打包项目里处理那些依赖。如果你有一个数组类型的 `externals` 配置，通常表示你需要对多个库使用相同的处理方式。

例如：

module.exports = {
  // 其他配置...
  externals: [
    { name: 'react', commonjs: 'react', amd: 'react', root: 'React' }, // 对 React 的处理
    { name: 'lodash', commonjs: 'lodash', amd: 'lodash', global: '_' }      // 对 lodash 的处理
  ]
};

在这个例子中，Webpack 将识别 `react` 和 `lodash` 是外部库，并不会尝试打包它们。对于 `react`，我们指定了它在 CommonJS 环境下的名称、AMD环境下的名称以及全局变量名。`global: '_'` 表示 `lodash` 库是在全局命名空间下，所以可以直接通过 `_` 访问。