Целевая среда

Webpack может компилировать для нескольких сред или целей. Чтобы подробно узнать, что такое target, прочитайте страницу концепции целей.

Целевая среда

string [string] false

Указывает webpack на создание кода времени выполнения для определенной среды. Обратите внимание, что код времени выполнения webpack не является тем же самым, что и код пользователя, который вы пишете. Вы должны транспилировать этот код с помощью транспиляторов, таких как Babel, если хотите нацелиться на определённые среды, например, если в исходном коде есть стрелочные функции, а вы хотите запустить скомпилированный код в средах ES5. Webpack не будет автоматически транспилировать их с помощью target, который был настроен.

По умолчанию используется 'browserslist' или 'web', если конфигурация browserslist не найдена.

строка

Следующие строковые значения поддерживаются через WebpackOptionsApply:

Параметр	Описание
async-node[[X].Y]	Компиляция для использования в среде, похожей на Node.js (использует fs и vm для асинхронной загрузки фрагментов)
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 для загрузки фрагментов)
node-webkit[[X].Y]	Компиляция для использования в WebKit и использование JSONP для загрузки фрагментов. Разрешает импорт встроенных модулей Node.js и nw.gui (экспериментально)
nwjs[[X].Y]	То же самое, что и node-webkit
web	Компиляция для использования в среде, похожей на браузер (по умолчанию)
webworker	Компиляция как WebWorker
esX	Компиляция для указанной версии ECMAScript. Примеры: es5, es2020.
browserslist	Определение платформы и возможностей ES из конфигурации browserslist (по умолчанию, если конфигурация browserslist доступна)

Например, когда target установлено в "electron-main", webpack включает несколько специфичных для electron переменных.

Может быть необязательно указана версия node или electron. Это обозначено как [[X].Y] в таблице выше.

webpack.config.js

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

Это помогает определить возможности ES, которые могут быть использованы для генерации кода времени выполнения (все фрагменты и модули обернуты кодом времени выполнения).

browserslist

Если в проекте есть конфигурация browserslist, webpack будет использовать её для:

• Определения возможностей ES, которые могут быть использованы для генерации кода времени выполнения.
• Определения среды (например: last 2 node versions то же самое, что и target: "node" с некоторыми output.environment параметрами).

Поддерживаемые значения browserslist:

• browserslist - использовать автоматически определенную конфигурацию browserslist и среду (из ближайшей package.json или BROWSERSLIST переменной окружения, см. документацию browserslist для деталей)
• browserslist:modern - использовать modern среду из автоматически определенной конфигурации browserslist
• browserslist:last 2 versions - использовать явное запрошенное значение browserslist (конфигурация будет проигнорирована)
• browserslist:/path/to/config - явное указание конфигурации browserslist
• browserslist:/path/to/config:modern - явное указание конфигурации browserslist и среды

[строка]

Когда передаётся несколько целей, используется общий подмножество возможностей:

webpack.config.js

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

Webpack сгенерирует код времени выполнения для веб-платформы и будет использовать только возможности 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.