Мишени

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

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

Для установки свойства 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: Хороший пример процесса сборки для основного и рендерного процессов Electron.