DefinePlugin

​ DefinePlugin​ 允许在 编译时 将你代码中的变量替换为其他值或表达式。这在需要根据开发模式与生产模式进行不同的操作时，非常有用。例如，如果想在开发构建中进行日志记录，而不在生产构建中进行，就可以定义一个全局常量去判断是否记录日志。这就是 ​DefinePlugin​ 的发光之处，设置好它，就可以忘掉开发环境和生产环境的构建规则。

new webpack.DefinePlugin({
  // 定义...
});

Usage

传递给 ​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');

Feature Flags

使用 feature flags 在生产/开发构建中可以启用/禁用项目的不同特性。

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

Service URL

在生产或开发构建中使用不同的服务 URL：

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

Runtime values via runtimeValue

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

可以使用依赖于文件的值定义变量，并且当这些文件在文件系统中更改时将重新评估。这意味着 webpack 将在此类监视文件更改时重建。

​webpack.DefinePlugin.runtimeValue​ 函数有两个参数：

• 第一个参数是一个函数（模块、键、版本），它应该返回要分配给定义的值。

• 第二个参数可以是要监视的文件路径数组，也可以是将模块标记为不可缓存的 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​。