目标

Webpack 可以为多种环境或 目标 进行编译。要详细了解 target 是什么，请阅读 targets 概念页面。

target

string [string] false

指示 webpack 为特定环境生成运行时代码。请注意，webpack 运行时代码与您编写的用户代码不同，如果您想针对特定环境（例如，您的源代码中有箭头函数并希望在 ES5 环境中运行打包的代码），则应使用 Babel 等转译器转译这些代码。webpack 不会在配置 target 后自动转译它们。

当未找到 browserslist 配置时，默认为 'browserslist' 或 'web'。

字符串

以下字符串值通过 WebpackOptionsApply 支持

选项	描述
async-node[[X].Y]	为 Node.js 类环境编译（使用 fs 和 vm 异步加载 chunk）
electron[[X].Y]-main	为 Electron 主进程编译。
electron[[X].Y]-renderer	为 Electron 渲染进程编译，使用 JsonpTemplatePlugin、FunctionModulePlugin 为浏览器环境提供目标，并使用 NodeTargetPlugin 和 ExternalsPlugin 为 CommonJS 和 Electron 内置模块提供目标。
electron[[X].Y]-preload	为 Electron 渲染进程编译，使用 NodeTemplatePlugin 并将 asyncChunkLoading 设置为 true，FunctionModulePlugin 为浏览器环境提供目标，并使用 NodeTargetPlugin 和 ExternalsPlugin 为 CommonJS 和 Electron 内置模块提供目标。
node[[X].Y]	为 Node.js 类环境编译（使用 Node.js 的 require 加载 chunk）
node-webkit[[X].Y]	为 WebKit 环境编译，使用 JSONP 加载 chunk。允许导入内置的 Node.js 模块和 nw.gui（实验性）
nwjs[[X].Y]	与 node-webkit 相同
web	为浏览器类环境编译 **(默认)**
webworker	编译为 WebWorker
esX	为指定的 ECMAScript 版本编译。示例：es5, es2020。
browserslist	从 browserslist 配置中推断平台和 ES 特性 **(如果 browserslist 配置可用，则为默认值)**

例如，当 target 设置为 "electron-main" 时，webpack 会包含多个 Electron 特定的变量。

可以可选地指定 node 或 electron 的版本。这由上表中的 [[X].Y] 表示。

webpack.config.js

module.exports = {
  // ...
  target: 'node12.18',
};

它有助于确定可用于生成运行时代码的 ES 特性（所有 chunk 和模块都由运行时代码包裹）。

browserslist

如果项目有 browserslist 配置，则 webpack 将使用它来

• 确定可用于生成运行时代码的 ES 特性。
• 推断环境（例如：last 2 node versions 与 target: "node" 具有相同的 output.environment 设置）。

支持的 browserslist 值

• browserslist - 使用自动解析的 browserslist 配置和环境（来自最近的 package.json 或 BROWSERSLIST 环境变量，详见 browserslist 文档）
• browserslist:modern - 使用自动解析的 browserslist 配置中的 modern 环境
• browserslist:last 2 versions - 使用显式的 browserslist 查询（配置将被忽略）
• browserslist:/path/to/config - 明确指定 browserslist 配置
• browserslist:/path/to/config:modern - 明确指定 browserslist 配置和环境

[string]

当传入多个目标时，将使用共同的特性子集

webpack.config.js

module.exports = {
  // ...
  target: ['web', 'es5'],
};

Webpack 将为 web 平台生成运行时代码，并且只使用 ES5 特性。

目前并非所有目标都可以混合使用。

webpack.config.js

module.exports = {
  // ...
  target: ['web', 'node'],
};

将导致错误。Webpack 目前不支持通用目标。

false

如果上述列表中没有预定义的目标满足您的需求，请将 target 设置为 false，将不会应用任何插件。

webpack.config.js

module.exports = {
  // ...
  target: false,
};

或者您可以应用您想要的特定插件

webpack.config.js

const webpack = require('webpack');

module.exports = {
  // ...
  target: false,
  plugins: [
    new webpack.web.JsonpTemplatePlugin(options.output),
    new webpack.LoaderTargetPlugin('web'),
  ],
};

当未提供关于目标或 环境 特性的信息时，将使用 ES2015。