Webpack 构建目标(Targets)

webpack 能够为多种环境或 target 构建编译。想要理解什么是 ​target​ 的详细信息， 请阅读 target 概念页面。

target

​string​ ​[string]​ ​false​

告知 webpack 为目标(target)指定一个环境。默认值为 ​"browserslist"​，如果没有找到 browserslist 的配置，则默认为 ​"web"​。

string

通过 WebpackOptionsApply， 可以支持以下字符串值：

例如，当 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 相关的特性。

目前并不是所有的 target 都可以进行混合。

webpack.config.js

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

此时会导致错误。webpack 暂时不支持 universal 的 target。

false

如果上述列表中的预设 target 都不符合你的需求，你可以将 target 设置为 false，这将告诉 webpack 不使用任何插件。

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'),
  ],
};

当没有提供 target 或 environment 特性的信息时，将默认使用 ES2015。