webpack的環境變量

在開發過程中我們可能需要打大量的log，便於在開發過程中進行調試。但是當在生產環境中在瀏覽器中打出這么多日志會造成信息泄漏。
如果在打生產包的時候逐行將log刪除，開發時再添加顯然是十分麻煩的。為此，我們可以利用Enviroment Flags，在使用webpack打包命令的時候傳入對應的參數，告訴程序是否顯示log。
無論是使用webpack命令或是webpack-dev-server進行打包，環境變量的傳入方法都是一樣的。
舉個例子:

env DEBUG=true webpack-dev-server


我們可以使用這條命令啟動webpack服務器，並傳入參數DEBUG參數，參數值為true.
在webpack.config.js文件中，我們可以通過process.env.DEBUG對參數進行接收。
給個完整的例子：
在webpack.config.js中定義一個自定義的插件，在插件中接收DEBUG參數。

var webpack = require('webpack');

var devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [devFlagPlugin]
};


在js文件中判斷 __DEV__ 的值，並做相應處理：

if (__DEV__) {
  console.log("hello world");
}