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。