Separate webpack config metadata for dev and prod

config/webpack.common.js

@@ -15,15 +15,9 @@ var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
 /**
  * Webpack Constants
  */
-const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
-const HMR = helpers.hasProcessFlag('hot');
 const METADATA = {
   title: 'Angular2 Webpack Starter by @gdi2990 from @AngularClass',
-  baseUrl: '/',
-  host: 'localhost',
-  port: 3000,
-  ENV: ENV,
-  HMR: HMR
+  baseUrl: '/'
 };
 
 /**
@@ -204,19 +198,6 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: 'src/index.html',
       chunksSortMode: 'none'
-    }),
-
-    // Plugin: DefinePlugin
-    // Description: Define free variables.
-    // Useful for having development builds with debug logging or adding global constants.
-    //
-    // Environment helpers
-    //
-    // See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
-    // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
-    new webpack.DefinePlugin({
-      'ENV': JSON.stringify(METADATA.ENV),
-      'HMR': HMR
     })
 
   ],

config/webpack.dev.js

@@ -6,6 +6,23 @@ var helpers = require('./helpers');
 var webpackMerge = require('webpack-merge'); //Used to merge webpack configs
 var commonConfig = require('./webpack.common.js'); //The settings that are common to prod and dev
 
+/**
+ * Webpack Plugins
+ */
+var DefinePlugin = require('webpack/lib/DefinePlugin');
+
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
+const HMR = helpers.hasProcessFlag('hot');
+const METADATA = webpackMerge(commonConfig.metadata, {
+  host: 'localhost',
+  port: 3000,
+  ENV: ENV,
+  HMR: HMR
+});
+
 /**
  * Webpack configuration
  *
@@ -53,6 +70,21 @@ module.exports = webpackMerge(commonConfig, {
 
   },
 
+  plugins: [
+    // Plugin: DefinePlugin
+    // Description: Define free variables.
+    // Useful for having development builds with debug logging or adding global constants.
+    //
+    // Environment helpers
+    //
+    // See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+    // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
+    new DefinePlugin({
+      'ENV': JSON.stringify(METADATA.ENV),
+      'HMR': METADATA.HMR
+    }),
+  ],
+
   // Static analysis linter for TypeScript advanced options configuration
   // Description: An extensible linter for the TypeScript language.
   //
@@ -70,8 +102,8 @@ module.exports = webpackMerge(commonConfig, {
   //
   // See: https://webpack.github.io/docs/webpack-dev-server.html
   devServer: {
-    port: commonConfig.metadata.port,
-    host: commonConfig.metadata.host,
+    port: METADATA.port,
+    host: METADATA.host,
     historyApiFallback: true,
     watchOptions: {
       aggregateTimeout: 300,

config/webpack.prod.js

@@ -10,11 +10,25 @@ var commonConfig = require('./webpack.common.js'); //The settings that are commo
  * Webpack Plugins
  */
 var ProvidePlugin = require('webpack/lib/ProvidePlugin');
+var DefinePlugin = require('webpack/lib/DefinePlugin');
 var DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
 var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
 var CompressionPlugin = require('compression-webpack-plugin');
 var WebpackMd5Hash = require('webpack-md5-hash');
 
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+const HOST = process.env.HOST || 'localhost';
+const PORT = process.env.PORT || 8080;
+const METADATA = webpackMerge(commonConfig.metadata, {
+  host: HOST,
+  port: PORT,
+  ENV: ENV,
+  HMR: false
+});
+
 module.exports = webpackMerge(commonConfig, {
   // Switch loaders to debug mode.
   //
@@ -76,6 +90,19 @@ module.exports = webpackMerge(commonConfig, {
     // See: https://github.com/webpack/docs/wiki/optimization#deduplication
     new DedupePlugin(),
 
+    // Plugin: DefinePlugin
+    // Description: Define free variables.
+    // Useful for having development builds with debug logging or adding global constants.
+    //
+    // Environment helpers
+    //
+    // See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+    // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
+    new DefinePlugin({
+      'ENV': JSON.stringify(METADATA.ENV),
+      'HMR': METADATA.HMR
+    }),
+
     // Plugin: UglifyJsPlugin
     // Description: Minimize all JavaScript output of chunks.
     // Loaders are switched into minimizing mode.