Цели

Поскольку JavaScript можно писать как для сервера, так и для браузера, webpack предлагает несколько целевых установок, которые можно задать в вашей конфигурации webpack конфигурации.

Свойство webpack target не следует путать со свойством output.libraryTarget. Дополнительную информацию см. в нашем руководстве по свойству output.

Использование

Чтобы задать свойство target, просто установите значение цели в вашей конфигурации webpack:

webpack.config.js

module.exports = {
  target: 'node'
};

В приведенном выше примере, используя node, webpack будет компилировать для использования в среде, похожей на Node.js (использует Node.js require для загрузки блоков и не затрагивает встроенные модули, такие как fs или path).

Каждая цель имеет различные специфичные для развертывания/среды дополнения, поддержку, соответствующую её потребностям. Узнайте, какие цели доступны.

Дополнительное расширение для других популярных значений цели

Несколько целей

Хотя webpack не поддерживает передачу нескольких строк в свойство target, вы можете создать изоморфную библиотеку, объединив две отдельные конфигурации:

webpack.config.js

const path = require('path');
const serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

const clientConfig = {
  target: 'web', // <=== can be omitted as default is 'web'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];

В приведенном выше примере будет создан файл lib.js и lib.node.js в папке dist.

Ресурсы

Как видно из приведенных выше вариантов, есть несколько целевых установок, из которых вы можете выбрать. Ниже приведен список примеров и ресурсов, к которым вы можете обратиться.

• compare-webpack-target-bundles: Отличный ресурс для тестирования и просмотра различных целевых установок webpack. Также отлично подходит для сообщения об ошибках.
• Шаблон приложения Electron-React: Хороший пример процесса сборки для основного процесса электрона и процесса рендеринга.

Нужно найти актуальные примеры использования этих целевых установок webpack в рабочем коде или шаблонах.