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
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
。