webpack 能夠?yàn)槎喾N環(huán)境或 target 構(gòu)建編譯。想要理解什么是 ?target? 的詳細(xì)信息， 請(qǐng)閱讀 target 概念頁面。

target

?string? ?[string]? ?false?

告知 webpack 為目標(biāo)(target)指定一個(gè)環(huán)境。默認(rèn)值為 ?"browserslist"?，如果沒有找到 browserslist 的配置，則默認(rèn)為 ?"web"?。

string

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

例如，當(dāng) target 設(shè)置為 ?"electron-main"?，webpack 引入多個(gè) electron 特定的變量。

可指定 node 或者 electron 的版本。上表中使用 ?[[X].Y]? 表示。

webpack.config.js

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

它有助于確定可能用于生成運(yùn)行時(shí)代碼的 ES 特性（所有的 chunk 和模塊都被運(yùn)行時(shí)代碼所包裹）

browserslist

如果一個(gè)項(xiàng)目有 browserslist 配置，那么 webpack 將會(huì)使用它：

• 確定可用于運(yùn)行時(shí)代碼的 ES 特性。
• 推斷環(huán)境（例如：last 2 node versions 等價(jià)于 target: node，并會(huì)進(jìn)行一些 output.environment 設(shè)置).

支持的 browserslist 值：

• ?browserslist? - 使用自動(dòng)解析的 browserslist 配置和環(huán)境（從最近的 package.json 或 BROWSERSLIST 環(huán)境變量中獲取，具體請(qǐng)查閱 browserslist 文檔）
• ?browserslist:modern? - 使用自動(dòng)解析的 browserslist 配置中的 modern 環(huán)境
• ?browserslist:last 2 versions? - 使用顯式 browserslist 查詢（配置將被忽略）
• ?browserslist:/path/to/config? - 明確指定 browserslist 配置路徑
• ?browserslist:/path/to/config:modern? - 明確指定 browserslist 的配置路徑和環(huán)境

[string]

當(dāng)傳遞多個(gè)目標(biāo)時(shí)，將使用共同的特性子集：

webpack.config.js

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

Webpack 將生成 web 平臺(tái)的運(yùn)行時(shí)代碼，并且只使用 ES5 相關(guān)的特性。

目前并不是所有的 target 都可以進(jìn)行混合。

webpack.config.js

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

此時(shí)會(huì)導(dǎo)致錯(cuò)誤。webpack 暫時(shí)不支持 universal 的 target。

false

如果上述列表中的預(yù)設(shè) target 都不符合你的需求，你可以將 target 設(shè)置為 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'),
  ],
};

當(dāng)沒有提供 target 或 environment 特性的信息時(shí)，將默認(rèn)使用 ES2015。