Webpack 構(gòu)建目標(biāo)(Targets)

webpack 能夠為多種環(huán)境或 target 構(gòu)建編譯。想要理解什么是 ?target? 的詳細信息， 請閱讀 target 概念頁面。

target

?string? ?[string]? ?false?

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

string

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

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

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

webpack.config.js

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

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

browserslist

如果一個項目有 browserslist 配置，那么 webpack 將會使用它：

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

支持的 browserslist 值：

• ?browserslist? - 使用自動解析的 browserslist 配置和環(huán)境（從最近的 package.json 或 BROWSERSLIST 環(huán)境變量中獲取，具體請查閱 browserslist 文檔）
• ?browserslist:modern? - 使用自動解析的 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)傳遞多個目標(biāo)時，將使用共同的特性子集：

webpack.config.js

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

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

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

webpack.config.js

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

此時會導(dǎo)致錯誤。webpack 暫時不支持 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 特性的信息時，將默認使用 ES2015。