使用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模块将不会被打包进应用程序中，而是在运行时通过全局变量_来访问。

相关问题

webpack build externals

外部化（externals）是指在构建过程中将某些依赖排除在打包文件之外，而是通过在运行时从外部引入这些依赖。对于使用Webpack构建的项目，可以通过配置externals来实现这一目的。

配置externals的步骤如下：

1. 在webpack配置文件中找到externals选项。
2. 在externals选项中，可以指定一个对象来描述需要外部化的依赖。
3. 对象的键表示需要外部化的模块名称，值表示在引入模块时使用的全局变量。例如，键可以是模块的名称，值可以是模块在全局作用域中暴露的变量。
4. 当Webpack构建过程中遇到需要外部化的模块时，会将这些模块排除在打包文件之外，并在运行时从外部引入。

以下是一个示例的webpack配置文件，演示了如何使用externals：

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

在上面的示例中，`jquery`和`lodash`模块被配置为外部化，分别使用全局变量`jQuery`和`_`进行引入。

使用externals可以减小打包文件的体积，并且可以利用全局变量或通过其他方式加载外部脚本来提供这些依赖项。这对于一些常见的库或框架如jQuery、React等特别有用，因为它们通常会被作为外部脚本引入。

webpack常用配置项有哪些？

webpack常用的配置项有：

1. entry：入口文件，指定打包的入口文件路径。
2. output：输出文件，指定打包后的输出文件路径和名称。
3. mode：模式，指定打包的模式，包括开发模式（development）和生产模式（production）。
4. module：模块，用于配置各种模块的处理规则。
5. resolve：解析，用于配置模块解析的规则，例如别名、扩展名等。
6. plugins：插件，用于扩展webpack功能，例如压缩代码、生成HTML文件等。
7. devServer：开发服务器，用于提供本地开发环境，包括自动刷新、代理等功能。
8. optimization：优化，用于配置打包的优化策略，例如代码分割、压缩等。
9. externals：外部扩展，用于将一些常用的依赖从打包文件中剔除，减小打包文件的体积。
10. target：目标环境，用于指定打包的目标环境，例如浏览器、Node.js等。

当然，还有很多其他的配置项，这里只列出了一些常用的。