title: Passing environment variables in Webpack 2
body: <p>Can someone help me figure out how to pass environment variables in Webpack 2 configuration?
  Trying to pass environment variables by using from the CONFIG function and using <code>./node_modules/.bin/webpack --env.ENV development</code> set them.
  When using <code>options.ENV</code> etc. I get a <code>TypeError: Cannot read property 'ENV' of undefined</code>.</p>
  
  <pre><code>const fs      = require('fs');
  const path    = require('path');
  const webpack = require('webpack');
  const assign  = require('object.assign');
  
  // Webpack Plugins
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  const CompressionPlugin = require('compression-webpack-plugin');
  const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
  
  // Constants
  const constants = require('./constants');
  
  const ROOT_DIR   = constants.ROOT_DIR;   // './'
  const SRC_DIR    = constants.SRC_DIR;    // './src'
  const CLIENT_DIR = constants.CLIENT_DIR; // './dist/client'
  const SERVER_DIR = constants.SERVER_DIR; // './dist/server'
  
  const VENDOR_NAME = constants.VENDOR_NAME; // 'vendor'
  const SERVER_NAME = constants.SERVER_NAME; // 'server'
  const CLIENT_NAME = constants.CLIENT_NAME; // 'main.browser'
  
  const SERVER_SOURCE_PATH = constants.SERVER_SOURCE_PATH; // './src/server/app.ts'
  const VENDOR_SOURCE_PATH = constants.VENDOR_SOURCE_PATH; // './src/vendor.ts'
  const CLIENT_SOURCE_PATH = constants.CLIENT_SOURCE_PATH; // './src/main.browser.ts'
  
  function CONFIG(options) {
    // Webpack Constants
    const NODE_MODULES = fs.readdirSync(ROOT_DIR + '/node_modules').filter((name) =&gt; {
      return name != '.bin';
    });
    const LOADERS = [{
      test: /\.ts$/,
      loader: 'awesome-typescript',
      exclude: [
        /\.(spec|e2e)\.ts$/,
        /node_modules/
      ]
    }, {
      test: /\.html$/,
      loader: 'raw'
    }, {
      test: /\.json$/,
      loader: 'json'
    }, {
      test: /\.css$/,
      loader: 'to-string!css!postcss'
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
      loader: 'url',
      query: { limit: 10000 }
    }];
    const AUTOPREFIXER_BROWSERS = [
      'last 2 versions'
    ];
    const POSTCSS = function() {
      return [
        require('postcss-partial-import'),
        require('postcss-nested'),
        require('postcss-mixins'),
        require('lost')(),
        require('postcss-cssnext')({
          browsers: AUTOPREFIXER_BROWSERS
        })
      ]
    }
    const COMMOM_PLUGINS = [
      new ForkCheckerPlugin(),
      // new webpack.DefinePlugin({
      //   ENV: JSON.stringify(options.ENV),
      //   NODE_ENV: JSON.stringify(options.ENV)
      // }),
      // ...options.development ? [] : [
      //     // production
      //     new webpack.LoaderOptionsPlugin({
      //     minimize: true,
      //     debug: false
      //   }),
      //   new webpack.optimize.UglifyJsPlugin({
      //     beautify: false,
      //     mangle: {
      //       screw_ie8 : true,
      //       keep_fnames: true
      //     },
      //     compress: {
      //       screw_ie8: true,
      //       warnings: false
      //     },
      //     output: {
      //       comments: false
      //     },
      //     sourceMap: false
      //   }),
      //   new CompressionPlugin({
      //     regExp: /\.css$|\.html$|\.js$|\.map$/,
      //     threshold: 2 * 1024
      //   })
      // ]
    ];
    // Webpack Common config
    const COMMON = {
      // devtool: options.development ? "cheap-module-eval-source-map" : false,
      // cache: options.development,
      // debug: options.development,
      resolve: {
        // cache: options.development,
        root: SRC_DIR,
        extensions: ['', '.ts', '.js']
      },
      module: {
        noParse: [
          path.join(__dirname, 'zone.js', 'dist'),
          path.join(__dirname, 'angular2', 'bundles')
        ],
        loaders: LOADERS
      },
      postcss: POSTCSS,
      node: {
        global: true,
        __dirname: true,
        __filename: true,
        process: true,
        // Buffer: options.development ? false : true
      }
    };
    // Webpack Client config
    const CLIENT = {
      target: 'web',
      entry: {
        [VENDOR_NAME]: VENDOR_SOURCE_PATH,
        [CLIENT_NAME]: CLIENT_SOURCE_PATH
      },
      output: {
        path: CLIENT_DIR,
        filename: '[name].js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
      },
      plugins: [
        ...COMMOM_PLUGINS,
        new CopyWebpackPlugin([{
          from: `${SRC_DIR}/assets`,
          to: 'common/assets'
        }])
      ]
    };
    // Webpack Server config
    const SERVER = {
      target: 'node',
      entry: {
        [SERVER_NAME]: SERVER_SOURCE_PATH
      },
      output: {
        path: SERVER_DIR,
        filename: '[name].js',
        chunkFilename: '[id].' + SERVER_NAME + '.js'
      },
      plugins: [
        ...COMMOM_PLUGINS
      ],
      externals: [
        NODE_MODULES.map(function(name) { return new RegExp('^' + name) }),
      ]
    };
  
    const _CLIENT_CONFIG = assign(CLIENT, COMMON);
    const _SERVER_CONFIG = assign(SERVER, COMMON);
    return {
      _CLIENT_CONFIG,
      _SERVER_CONFIG
    }
  }
  
  const CLIENT_CONFIG = CONFIG()._CLIENT_CONFIG
  const SERVER_CONFIG = CONFIG()._SERVER_CONFIG
  
  // Export
  module.exports = [CLIENT_CONFIG, SERVER_CONFIG];
  </code></pre>