DefinePlugin

Плагин 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');

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),
});

URL сервисов

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

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

Значения во время выполнения через runtimeValue

function (getterFunction, [string] | true | object) => getterFunction()

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

Для функции webpack.DefinePlugin.runtimeValue существуют два аргумента:

• Первый аргумент — function(module, key, version), который должен возвращать значение, которое будет назначено определению.

• Второй аргумент может быть либо массивом путей к файлам для отслеживания, либо true, чтобы пометить модуль как некэшируемый. Начиная с версии 5.26.0, он также может принимать объектный аргумент со следующими свойствами:

  • fileDependencies?: string[] Список файлов, от которых зависит функция.
  • contextDependencies?: string[] Список каталогов, от которых зависит функция.
  • missingDependencies?: string[] Список файлов, которые не существуют и от которых зависит функция.
  • buildDependencies?: string[] Список зависимостей сборки, от которых зависит функция.
  • version?: string | () => string Версия функции.

const fileDep = path.resolve(__dirname, 'sample.txt');

new webpack.DefinePlugin({
  BUILT_AT: webpack.DefinePlugin.runtimeValue(Date.now, {
    fileDependencies: [fileDep],
  }),
});

Значением BUILT_AT будет время последнего обновления 'sample.txt' в файловой системе, например 1597953013291.