DefinePlugin

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")
})

console.log("Running App version " + VERSION
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv"

注意，因为这个插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号。通常，有两种方式来达到这个效果，使用 '"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')

功能标记(Feature Flags)

使用功能标记来「启用/禁用」「生产/开发」构建中的功能。

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

当定义值process喜欢'process.env.NODE_ENV': JSON.stringify('production')过process: { env: { NODE_ENV: JSON.stringify('production') } }。使用后者将覆盖process可能会破坏与某些需要定义过程对象上的其他值的模块的兼容性的对象。

使用功能标记来「启用/禁用」「生产/开发」构建中的功能。

new webpack.DefinePlugin{
  'SERVICE_URL': JSON.stringify("http://dev.example.com")
})