DefinePlugin

The DefinePlugin позволяет создавать глобальные константы, которые можно настраивать во время компиляции. Это может быть полезно для разного поведения между сборками разработки и производства. Если вы выполняете ведение журнала в сборке разработки, но не в сборке производства, вы можете использовать глобальную константу, чтобы определить, происходит ли ведение журнала. Именно здесь DefinePlugin пригодится, настройте и забудьте правила для сборок разработки и производства.

new webpack.DefinePlugin({
  // Definitions...
});

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

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

• Если значение является строкой, оно будет использоваться как фрагмент кода.
• Если значение не является строкой, оно будет строковено (включая функции).
• Если значение является объектом, все ключи определяются аналогичным образом.
• Если вы добавляете префикс typeof к ключу, он определён только для вызовов typeof.

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

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});

console.log('Running App version ' + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require('html5shiv');

При определении значений для process предпочитайте 'process.env.NODE_ENV': JSON.stringify('production') вместо process: { env: { NODE_ENV: JSON.stringify('production') } }. Использование последнего перепишет объект process, что может нарушить совместимость с некоторыми модулями, которые ожидают определения других значений в объекте процесса.

Обратите внимание, что поскольку плагин выполняет прямое текстовое замещение, значение, переданное ему, должно содержать собственные кавычки внутри самой строки. Обычно это делается либо с альтернативными кавычками, такими как '"production"', или с помощью JSON.stringify('production').

index.js

if (!PRODUCTION) {
  console.log('Debug info');
}

if (PRODUCTION) {
  console.log('Production log');
}

После прохождения через webpack без сжатия результат:

if (!true) {
  console.log('Debug info');
}
if (true) {
  console.log('Production log');
}

а затем после прохождения сжатия:

console.log('Production log');

Флаги функций

Включить/отключить функции в сборке производства/разработки с помощью флагов функций.

new webpack.DefinePlugin({
  'NICE_FEATURE': JSON.stringify(true),
  'EXPERIMENTAL_FEATURE': JSON.stringify(false)
});

Ссылки на сервисы

Используйте другую ссылку на сервис в сборках производства/разработки:

new webpack.DefinePlugin({
  'SERVICE_URL': JSON.stringify('https://dev.example.com')
});