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")
})
console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");
T> 注意,因为这个插件直接执行文本替换,给定的值必须包含字符串本身内的实际引号。通常,有两种方式来达到这个效果,使用 '"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')
}
通过使用压缩的 webpack 的结果:
console.log('Production log')
使用功能标记来「启用/禁用」「生产/开发」构建中的功能。
new webpack.DefinePlugin({
'NICE_FEATURE': JSON.stringify(true),
'EXPERIMENTAL_FEATURE': JSON.stringify(false)
})
W> When defining values for process
prefer 'process.env.NODE_ENV': JSON.stringify('production')
over process: { env: { NODE_ENV: JSON.stringify('production') } }
. Using the latter will overwrite the process
object which can break compatibility with some modules that expect other values on the process object to be defined.
在「生产/开发」构建中使用不同的服务 URL(Service URLs):
new webpack.DefinePlugin({
'SERVICE_URL': JSON.stringify("http://dev.example.com")
})