The Basic Idea of DefinePlugin

Webpack 提供一個 DefinePlugin 的方法，它可以改寫匹配的 free variables。

請看下面這個程式碼：

var foo;

// Not free, not ok to replace
if(foo === 'bar') {
  console.log('bar');
}

// Free, ok to replace
if(bar === 'bar') {
  console.log('bar');
}

如果我們把 bar 換成字串 'bar'：

var foo;

// Not free, not ok to replace
if(foo === 'bar') {
  console.log('bar');
}

// Free, ok to replace
if('bar' === 'bar') {
  console.log('bar');
}

進一步來說，'bar' === 'bar' 等於 true，所以 UglifyJS 讓我們可以這樣做：

var foo;

// Not free, not ok to replace
if(foo === 'bar') {
  console.log('bar');
}

// Free, ok to replace
if(true) {
  console.log('bar');
}

以上述程式碼為基礎，UglifyJS 就可以偵測 if 述句：

var foo;

// Not free, not ok to replace
if(foo === 'bar') {
  console.log('bar');
}

// Free, ok to replace
console.log('bar');

這就是 DefinePlugin 的核心概念。