Target 配置

webpackjsorg-main配置参考

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

target

string [string] false

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

默认值为 'browserslist'，若未找到 browserslist 配置，则默认值为 'web'。

string

以下字符串值通过 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 渲染进程而编译，提供一个目标，该目标使用 `asyncChunkLoading` 设为 `true` 的 `NodeTemplatePlugin`、`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 编译
`universal`	编译一个在运行时自适应于浏览器、Web Worker、Node.js、Electron 和 NW.js 环境的单一 bundle。始终输出 ECMAScript 模块。自 webpack 5.108.0 起可用。
`bun`	为 Bun 而编译。输出 ECMAScript 模块并外部化 `bun:*` 和 Node.js 内置模块。自 webpack 5.108.0 起可用。
`deno[[X].Y]`	为 Deno 而编译。输出 ECMAScript 模块，通过必需的 `node:` 标识符解析 Node.js 内置模块，并保持 Deno 自身的导入协议（`npm:`、`jsr:`、`node:`、`http(s)://`）为外部模块。自 webpack 5.108.0 起可用。
`esX`	为指定的 ECMAScript 版本编译。例如：es5、es2020。
`browserslist`	从 browserslist 配置中推断平台和 ES 特性（如果 browserslist 配置可用，则为默认值）

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

可以可选地指定 node 或 electron 的版本。如上表所示，用 [[X].Y] 表示。

webpack.config.js

js 复制代码

export default {
  // ...
  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 配置文件和环境

universal

一个单一的预设，结合了 web、web worker、node、electron 和 nwjs 平台，使每个平台标志保持中立，以便 bundle 在运行时自适应，而不是锁定到单一环境。它是手写 target: ["web", "node"] 的便捷替代方案，并且始终输出 ECMAScript 模块。对于此 target，experiments.outputModule 默认为 true。

webpack.config.js

js 复制代码

export default {
  // ...
  target: "universal",
};

针对 universal 构建的说明：

new Worker(new URL(...)) 在 Node 中解析来自 worker_threads 的 Worker 构造函数，在 Web 中解析为全局 Worker。
在 ESM 输出中支持 commonjs 和 node-commonjs 外部模块（通过 process.getBuiltinModule 的 createRequire 加载），global 外部模块使用 globalThis 作为全局对象。
CSS 在 Node 中运行以进行服务端渲染：来自 style 注入和 link 加载的 chunk 中的样式会被收集到 globalThis["__webpack_css__" + output.uniqueName] 中，供 SSR 宿主读取。

bun

为 Bun 而编译。bundle 作为 ECMAScript 模块输出（experiments.outputModule 默认为 true），并且 Bun 自身的 bun:* 模块以及 Bun 提供的 Node.js 内置模块会被外部化，而不是被打包。

webpack.config.js

js 复制代码

export default {
  // ...
  target: "bun",
};

deno

为 Deno 而编译。bundle 作为 ECMAScript 模块输出（experiments.outputModule 默认为 true）。Node.js 内置模块通过 Deno 要求的 node: 标识符解析，并且 Deno 自身的导入协议（npm:、jsr:、node: 和 http(s):// URL）保持为外部模块，由运行时加载。可以指定版本，例如 deno2 或 deno1.40。

webpack.config.js

js 复制代码

export default {
  // ...
  target: "deno", // 也支持 "deno2", "deno1.40", ...
};

[string]

当传入多个 target 时，将使用这些目标的公共特性子集：

webpack.config.js

js 复制代码

export default {
  // ...
  target: ["web", "es5"],
};

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

您也可以组合平台目标来构建可在多种环境中运行的通用代码：

webpack.config.js

js 复制代码

export default {
  // ...
  target: ["web", "node"],
};

Webpack 将生成可在浏览器和 Node.js 环境中都能工作的运行时代码。

false

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

webpack.config.js

js 复制代码

export default {
  // ...
  target: false,
};

或者，您可以应用所需的特定插件：

webpack.config.js

js 复制代码

import webpack from "webpack";

export default {
  // ...
  target: false,
  plugins: [
    new webpack.web.JsonpTemplatePlugin(options.output),
    new webpack.LoaderTargetPlugin("web"),
  ],
};

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

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。