Merge branch 'master' into webseed-merged

4 files changed, 501 insertions, 478 deletions

diff --git a/client/config/helpers.js b/client/config/helpers.js
index 24d7dae9f..6268d2628 100644
--- a/client/config/helpers.js
+++ b/client/config/helpers.js
@@ -8,10 +8,15 @@ function hasProcessFlag (flag) {
   return process.argv.join('').indexOf(flag) > -1
 }
 
+function isWebpackDevServer () {
+  return process.argv[1] && !!(/webpack-dev-server$/.exec(process.argv[1]))
+}
+
 function root (args) {
   args = Array.prototype.slice.call(arguments, 0)
   return path.join.apply(path, [ROOT].concat(args))
 }
 
 exports.hasProcessFlag = hasProcessFlag
+exports.isWebpackDevServer = isWebpackDevServer
 exports.root = root
diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index 2ff3a1506..882013a9e 100644
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -5,9 +5,11 @@ const helpers = require('./helpers')
  * Webpack Plugins
  */
 
-var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin)
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin
+const AssetsPlugin = require('assets-webpack-plugin')
+const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
 const WebpackNotifierPlugin = require('webpack-notifier')
 
 /*
@@ -15,7 +17,8 @@ const WebpackNotifierPlugin = require('webpack-notifier')
  */
 const METADATA = {
   title: 'PeerTube',
-  baseUrl: '/'
+  baseUrl: '/',
+  isDevServer: helpers.isWebpackDevServer()
 }
 
 /*
@@ -23,247 +26,241 @@ const METADATA = {
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = {
-  /*
-   * Static metadata for index.html
-   *
-   * See: (custom attribute)
-   */
-  metadata: METADATA,
+module.exports = function (options) {
+  var isProd = options.env === 'production'
 
-  /*
-   * Cache generated modules and chunks to improve performance for multiple incremental builds.
-   * This is enabled by default in watch mode.
-   * You can pass false to disable it.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#cache
-   */
-  // cache: false,
-
-  /*
-   * The entry point for the bundle
-   * Our Angular.js app
-   *
-   * See: http://webpack.github.io/docs/configuration.html#entry
-   */
-  entry: {
-    'polyfills': './src/polyfills.ts',
-    'vendor': './src/vendor.ts',
-    'main': './src/main.ts'
-  },
+  return {
+    /*
+     * Static metadata for index.html
+     *
+     * See: (custom attribute)
+     */
+    metadata: METADATA,
 
-  /*
-   * Options affecting the resolving of modules.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#resolve
-   */
-  resolve: {
     /*
-     * An array of extensions that should be used to resolve modules.
+     * Cache generated modules and chunks to improve performance for multiple incremental builds.
+     * This is enabled by default in watch mode.
+     * You can pass false to disable it.
      *
-     * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+     * See: http://webpack.github.io/docs/configuration.html#cache
      */
-    extensions: [ '', '.ts', '.js', '.scss' ],
+    // cache: false,
 
-    // Make sure root is src
-    root: helpers.root('src'),
+    /*
+     * The entry point for the bundle
+     * Our Angular.js app
+     *
+     * See: http://webpack.github.io/docs/configuration.html#entry
+     */
+    entry: {
+      'polyfills': './src/polyfills.ts',
+      'vendor': './src/vendor.ts',
+      'main': './src/main.ts'
+    },
 
-    // remove other default values
-    modulesDirectories: [ 'node_modules' ],
+    /*
+     * Options affecting the resolving of modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#resolve
+     */
+    resolve: {
+      /*
+       * An array of extensions that should be used to resolve modules.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+       */
+      extensions: [ '', '.ts', '.js', '.scss' ],
 
-    packageAlias: 'browser'
+      // Make sure root is src
+      root: helpers.root('src'),
 
-  },
+      // remove other default values
+      modulesDirectories: [ 'node_modules' ]
+    },
 
-  output: {
-    publicPath: '/client/'
-  },
+    output: {
+      publicPath: '/client/'
+    },
 
-  /*
-   * Options affecting the normal modules.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#module
-   */
-  module: {
     /*
-     * An array of applied pre and post loaders.
+     * Options affecting the normal modules.
      *
-     * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
+     * See: http://webpack.github.io/docs/configuration.html#module
      */
-    preLoaders: [
-
+    module: {
       /*
-       * Tslint loader support for *.ts files
+       * An array of applied pre and post loaders.
        *
-       * See: https://github.com/wbuchwalter/tslint-loader
+       * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
        */
-      // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
+      preLoaders: [
+        {
+          test: /\.ts$/,
+          loader: 'string-replace-loader',
+          query: {
+            search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
+            replace: '$1.import($3).then(mod => (mod.__esModule && mod.default) ? mod.default : mod)',
+            flags: 'g'
+          },
+          include: [helpers.root('src')]
+        }
+      ],
 
       /*
-       * Source map loader support for *.js files
-       * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
+       * An array of automatically applied loaders.
+       *
+       * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
+       * This means they are not resolved relative to the configuration file.
        *
-       * See: https://github.com/webpack/source-map-loader
+       * See: http://webpack.github.io/docs/configuration.html#module-loaders
        */
-      {
-        test: /\.js$/,
-        loader: 'source-map-loader',
-        exclude: [
-          // these packages have problems with their sourcemaps
-          helpers.root('node_modules/rxjs'),
-          helpers.root('node_modules/@angular')
-        ]
-      }
-
-    ],
+      loaders: [
+
+        /*
+         * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+         *
+         * See: https://github.com/s-panferov/awesome-typescript-loader
+         */
+        {
+          test: /\.ts$/,
+          loaders: [
+            '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
+            'awesome-typescript-loader',
+            'angular2-template-loader'
+          ],
+          exclude: [/\.(spec|e2e)\.ts$/]
+        },
+
+        /*
+         * Json loader support for *.json files.
+         *
+         * See: https://github.com/webpack/json-loader
+         */
+        {
+          test: /\.json$/,
+          loader: 'json-loader'
+        },
+
+        {
+          test: /\.(sass|scss)$/,
+          loaders: ['css-to-string-loader', 'css-loader?sourceMap', 'resolve-url', 'sass-loader?sourceMap']
+        },
+        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&minetype=application/font-woff' },
+        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' },
+
+        /* Raw loader support for *.html
+         * Returns file content as string
+         *
+         * See: https://github.com/webpack/raw-loader
+         */
+        {
+          test: /\.html$/,
+          loader: 'raw-loader',
+          exclude: [ helpers.root('src/index.html') ]
+        }
+
+      ]
+
+    },
+
+    sassLoader: {
+      precision: 10
+    },
 
     /*
-     * An array of automatically applied loaders.
-     *
-     * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
-     * This means they are not resolved relative to the configuration file.
+     * Add additional plugins to the compiler.
      *
-     * See: http://webpack.github.io/docs/configuration.html#module-loaders
+     * See: http://webpack.github.io/docs/configuration.html#plugins
      */
-    loaders: [
+    plugins: [
+      new AssetsPlugin({
+        path: helpers.root('dist'),
+        filename: 'webpack-assets.json',
+        prettyPrint: true
+      }),
 
       /*
-       * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+       * Plugin: ForkCheckerPlugin
+       * Description: Do type checking in a separate process, so webpack don't need to wait.
        *
-       * See: https://github.com/s-panferov/awesome-typescript-loader
+       * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
        */
-      {
-        test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
-        exclude: [/\.(spec|e2e)\.ts$/]
-      },
+      new ForkCheckerPlugin(),
 
       /*
-       * Json loader support for *.json files.
+       * Plugin: CommonsChunkPlugin
+       * Description: Shares common code between the pages.
+       * It identifies common modules and put them into a commons chunk.
        *
-       * See: https://github.com/webpack/json-loader
+       * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
+       * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
        */
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
+      new webpack.optimize.CommonsChunkPlugin({
+        name: [ 'polyfills', 'vendor' ].reverse()
+      }),
 
-      {
-        test: /\.scss$/,
-        exclude: /node_modules/,
-        loaders: [ 'raw-loader', 'sass-loader' ]
-      },
-
-      {
-        test: /\.(woff2?|ttf|eot|svg)$/,
-        loader: 'url?limit=10000&name=assets/fonts/[hash].[ext]'
-      },
+      /**
+       * Plugin: ContextReplacementPlugin
+       * Description: Provides context to Angular's use of System.import
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
+       * See: https://github.com/angular/angular/issues/11580
+      */
+      new ContextReplacementPlugin(
+        // The (\\|\/) piece accounts for path separators in *nix and Windows
+        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+        helpers.root('src') // location of your src
+      ),
 
-      /* Raw loader support for *.html
-       * Returns file content as string
+      /*
+       * Plugin: CopyWebpackPlugin
+       * Description: Copy files and directories in webpack.
        *
-       * See: https://github.com/webpack/raw-loader
+       * Copies project static assets.
+       *
+       * See: https://www.npmjs.com/package/copy-webpack-plugin
        */
-      {
-        test: /\.html$/,
-        loader: 'raw-loader',
-        exclude: [ helpers.root('src/index.html') ]
-      }
-
-    ]
-
-  },
+      new CopyWebpackPlugin([
+        {
+          from: 'src/assets',
+          to: 'assets'
+        },
+        {
+          from: 'node_modules/webtorrent/webtorrent.min.js',
+          to: 'assets/webtorrent'
+        }
+      ]),
 
-  sassLoader: {
-    precision: 10
-  },
-
-  /*
-   * Add additional plugins to the compiler.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#plugins
-   */
-  plugins: [
-
-    /*
-     * Plugin: ForkCheckerPlugin
-     * Description: Do type checking in a separate process, so webpack don't need to wait.
-     *
-     * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
-     */
-    new ForkCheckerPlugin(),
-
-    /*
-     * Plugin: OccurenceOrderPlugin
-     * Description: Varies the distribution of the ids to get the smallest id length
-     * for often used ids.
-     *
-     * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
-     * See: https://github.com/webpack/docs/wiki/optimization#minimize
-     */
-    new webpack.optimize.OccurenceOrderPlugin(true),
-
-    /*
-     * Plugin: CommonsChunkPlugin
-     * Description: Shares common code between the pages.
-     * It identifies common modules and put them into a commons chunk.
-     *
-     * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
-     * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
-     */
-    new webpack.optimize.CommonsChunkPlugin({
-      name: [ 'polyfills', 'vendor' ].reverse()
-    }),
+      /*
+       * Plugin: HtmlWebpackPlugin
+       * Description: Simplifies creation of HTML files to serve your webpack bundles.
+       * This is especially useful for webpack bundles that include a hash in the filename
+       * which changes every compilation.
+       *
+       * See: https://github.com/ampedandwired/html-webpack-plugin
+       */
+      new HtmlWebpackPlugin({
+        template: 'src/index.html',
+        chunksSortMode: 'dependency'
+      }),
 
-    /*
-     * Plugin: CopyWebpackPlugin
-     * Description: Copy files and directories in webpack.
-     *
-     * Copies project static assets.
-     *
-     * See: https://www.npmjs.com/package/copy-webpack-plugin
-     */
-    new CopyWebpackPlugin([
-      {
-        from: 'src/assets',
-        to: 'assets'
-      },
-      {
-        from: 'node_modules/webtorrent/webtorrent.min.js',
-        to: 'assets/webtorrent'
-      }
-    ]),
+      new WebpackNotifierPlugin({ alwaysNotify: true })
+    ],
 
     /*
-     * Plugin: HtmlWebpackPlugin
-     * Description: Simplifies creation of HTML files to serve your webpack bundles.
-     * This is especially useful for webpack bundles that include a hash in the filename
-     * which changes every compilation.
+     * Include polyfills or mocks for various node stuff
+     * Description: Node configuration
      *
-     * See: https://github.com/ampedandwired/html-webpack-plugin
+     * See: https://webpack.github.io/docs/configuration.html#node
      */
-    new HtmlWebpackPlugin({
-      template: 'src/index.html',
-      chunksSortMode: 'dependency'
-    }),
-
-    new WebpackNotifierPlugin({ alwaysNotify: true })
-  ],
-
-  /*
-   * Include polyfills or mocks for various node stuff
-   * Description: Node configuration
-   *
-   * See: https://webpack.github.io/docs/configuration.html#node
-   */
-  node: {
-    global: 'window',
-    crypto: 'empty',
-    fs: 'empty',
-    events: true,
-    module: false,
-    clearImmediate: false,
-    setImmediate: false
+    node: {
+      global: 'window',
+      crypto: 'empty',
+      fs: 'empty',
+      events: true,
+      module: false,
+      clearImmediate: false,
+      setImmediate: false
+    }
   }
-
 }
diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js
index 50193bf58..0b6c00cbd 100644
--- a/client/config/webpack.dev.js
+++ b/client/config/webpack.dev.js
@@ -6,15 +6,18 @@ const commonConfig = require('./webpack.common.js') // the settings that are com
  * Webpack Plugins
  */
 const DefinePlugin = require('webpack/lib/DefinePlugin')
+const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin')
 
 /**
  * Webpack Constants
  */
 const ENV = process.env.ENV = process.env.NODE_ENV = 'development'
+const HOST = process.env.HOST || 'localhost'
+const PORT = process.env.PORT || 3000
 const HMR = helpers.hasProcessFlag('hot')
-const METADATA = webpackMerge(commonConfig.metadata, {
-  host: 'localhost',
-  port: 3000,
+const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
+  host: HOST,
+  port: PORT,
   ENV: ENV,
   HMR: HMR
 })
@@ -24,119 +27,136 @@ const METADATA = webpackMerge(commonConfig.metadata, {
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = webpackMerge(commonConfig, {
-  /**
-   * Merged metadata from webpack.common.js for index.html
-   *
-   * See: (custom attribute)
-   */
-  metadata: METADATA,
-
-  /**
-   * Switch loaders to debug mode.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#debug
-   */
-  debug: true,
-
-  /**
-   * Developer tool to enhance debugging
-   *
-   * See: http://webpack.github.io/docs/configuration.html#devtool
-   * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
-   */
-  devtool: 'cheap-module-source-map',
-
-  /**
-   * Options affecting the output of the compilation.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#output
-   */
-  output: {
+module.exports = function (env) {
+  return webpackMerge(commonConfig({env: ENV}), {
     /**
-     * The output directory as absolute path (required).
+     * Merged metadata from webpack.common.js for index.html
      *
-     * See: http://webpack.github.io/docs/configuration.html#output-path
+     * See: (custom attribute)
      */
-    path: helpers.root('dist'),
+    metadata: METADATA,
 
     /**
-     * Specifies the name of each output file on disk.
-     * IMPORTANT: You must not specify an absolute path here!
+     * Switch loaders to debug mode.
      *
-     * See: http://webpack.github.io/docs/configuration.html#output-filename
+     * See: http://webpack.github.io/docs/configuration.html#debug
      */
-    filename: '[name].bundle.js',
+    debug: true,
 
     /**
-     * The filename of the SourceMaps for the JavaScript files.
-     * They are inside the output.path directory.
+     * Developer tool to enhance debugging
      *
-     * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
+     * See: http://webpack.github.io/docs/configuration.html#devtool
+     * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
      */
-    sourceMapFilename: '[name].map',
+    devtool: 'cheap-module-source-map',
 
-    /** The filename of non-entry chunks as relative path
-     * inside the output.path directory.
+    /**
+     * Options affecting the output of the compilation.
      *
-     * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
+     * See: http://webpack.github.io/docs/configuration.html#output
      */
-    chunkFilename: '[id].chunk.js'
-
-  },
-
-  externals: {
-    webtorrent: 'WebTorrent'
-  },
+    output: {
+      /**
+       * The output directory as absolute path (required).
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-path
+       */
+      path: helpers.root('dist'),
+
+      /**
+       * Specifies the name of each output file on disk.
+       * IMPORTANT: You must not specify an absolute path here!
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-filename
+       */
+      filename: '[name].bundle.js',
+
+      /**
+       * The filename of the SourceMaps for the JavaScript files.
+       * They are inside the output.path directory.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
+       */
+      sourceMapFilename: '[name].map',
+
+      /** The filename of non-entry chunks as relative path
+       * inside the output.path directory.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
+       */
+      chunkFilename: '[id].chunk.js',
+
+      library: 'ac_[name]',
+      libraryTarget: 'var'
+
+    },
+
+    externals: {
+      webtorrent: 'WebTorrent'
+    },
+
+    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,
+        'process.env': {
+          'ENV': JSON.stringify(METADATA.ENV),
+          'NODE_ENV': JSON.stringify(METADATA.ENV),
+          'HMR': METADATA.HMR
+        }
+      }),
 
-  plugins: [
+      new NamedModulesPlugin()
+    ],
 
     /**
-     * Plugin: DefinePlugin
-     * Description: Define free variables.
-     * Useful for having development builds with debug logging or adding global constants.
+     * Static analysis linter for TypeScript advanced options configuration
+     * Description: An extensible linter for the TypeScript language.
      *
-     * Environment helpers
+     * See: https://github.com/wbuchwalter/tslint-loader
+     */
+    tslint: {
+      emitErrors: false,
+      failOnHint: false,
+      resourcePath: 'src'
+    },
+
+    devServer: {
+      port: METADATA.port,
+      host: METADATA.host,
+      historyApiFallback: true,
+      watchOptions: {
+        aggregateTimeout: 300,
+        poll: 1000
+      },
+      outputPath: helpers.root('dist')
+    },
+
+    /*
+     * Include polyfills or mocks for various node stuff
+     * Description: Node configuration
      *
-     * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+     * See: https://webpack.github.io/docs/configuration.html#node
      */
-    // 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,
-      'process.env': {
-        'ENV': JSON.stringify(METADATA.ENV),
-        'NODE_ENV': JSON.stringify(METADATA.ENV),
-        'HMR': METADATA.HMR
-      }
-    })
-  ],
-
-  /**
-   * Static analysis linter for TypeScript advanced options configuration
-   * Description: An extensible linter for the TypeScript language.
-   *
-   * See: https://github.com/wbuchwalter/tslint-loader
-   */
-  tslint: {
-    emitErrors: false,
-    failOnHint: false,
-    resourcePath: 'src'
-  },
-
-  /*
-   * Include polyfills or mocks for various node stuff
-   * Description: Node configuration
-   *
-   * See: https://webpack.github.io/docs/configuration.html#node
-   */
-  node: {
-    global: 'window',
-    crypto: 'empty',
-    process: true,
-    module: false,
-    clearImmediate: false,
-    setImmediate: false
-  }
-
-})
+    node: {
+      global: 'window',
+      crypto: 'empty',
+      process: true,
+      module: false,
+      clearImmediate: false,
+      setImmediate: false
+    }
+  })
+}
diff --git a/client/config/webpack.prod.js b/client/config/webpack.prod.js
index 7ce5727d3..46db54482 100644
--- a/client/config/webpack.prod.js
+++ b/client/config/webpack.prod.js
@@ -9,10 +9,12 @@ const commonConfig = require('./webpack.common.js') // the settings that are com
 /**
  * Webpack Plugins
  */
+// const ProvidePlugin = require('webpack/lib/ProvidePlugin')
 const DefinePlugin = require('webpack/lib/DefinePlugin')
-const DedupePlugin = require('webpack/lib/optimize/DedupePlugin')
+const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin')
+// const IgnorePlugin = require('webpack/lib/IgnorePlugin')
+// const DedupePlugin = require('webpack/lib/optimize/DedupePlugin')
 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
-const CompressionPlugin = require('compression-webpack-plugin')
 const WebpackMd5Hash = require('webpack-md5-hash')
 
 /**
@@ -21,211 +23,210 @@ const WebpackMd5Hash = require('webpack-md5-hash')
 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, {
+const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
   host: HOST,
   port: PORT,
   ENV: ENV,
   HMR: false
 })
 
-module.exports = webpackMerge(commonConfig, {
-  /**
-   * Switch loaders to debug mode.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#debug
-   */
-  debug: false,
-
-  /**
-   * Developer tool to enhance debugging
-   *
-   * See: http://webpack.github.io/docs/configuration.html#devtool
-   * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
-   */
-  devtool: 'source-map',
-
-  /**
-   * Options affecting the output of the compilation.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#output
-   */
-  output: {
+module.exports = function (env) {
+  return webpackMerge(commonConfig({env: ENV}), {
     /**
-     * The output directory as absolute path (required).
+     * Switch loaders to debug mode.
      *
-     * See: http://webpack.github.io/docs/configuration.html#output-path
+     * See: http://webpack.github.io/docs/configuration.html#debug
      */
-    path: helpers.root('dist'),
+    debug: false,
 
     /**
-     * Specifies the name of each output file on disk.
-     * IMPORTANT: You must not specify an absolute path here!
+     * Developer tool to enhance debugging
      *
-     * See: http://webpack.github.io/docs/configuration.html#output-filename
+     * See: http://webpack.github.io/docs/configuration.html#devtool
+     * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
      */
-    filename: '[name].[chunkhash].bundle.js',
+    devtool: 'source-map',
 
     /**
-     * The filename of the SourceMaps for the JavaScript files.
-     * They are inside the output.path directory.
+     * Options affecting the output of the compilation.
      *
-     * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
+     * See: http://webpack.github.io/docs/configuration.html#output
      */
-    sourceMapFilename: '[name].[chunkhash].bundle.map',
+    output: {
+      /**
+       * The output directory as absolute path (required).
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-path
+       */
+      path: helpers.root('dist'),
+
+      /**
+       * Specifies the name of each output file on disk.
+       * IMPORTANT: You must not specify an absolute path here!
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-filename
+       */
+      filename: '[name].[chunkhash].bundle.js',
+
+      /**
+       * The filename of the SourceMaps for the JavaScript files.
+       * They are inside the output.path directory.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
+       */
+      sourceMapFilename: '[name].[chunkhash].bundle.map',
+
+      /**
+       * The filename of non-entry chunks as relative path
+       * inside the output.path directory.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
+       */
+      chunkFilename: '[id].[chunkhash].chunk.js'
+
+    },
+
+    externals: {
+      webtorrent: 'WebTorrent'
+    },
 
     /**
-     * The filename of non-entry chunks as relative path
-     * inside the output.path directory.
+     * Add additional plugins to the compiler.
      *
-     * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
+     * See: http://webpack.github.io/docs/configuration.html#plugins
      */
-    chunkFilename: '[id].[chunkhash].chunk.js'
-
-  },
-
-  externals: {
-    webtorrent: 'WebTorrent'
-  },
-
-  /**
-   * Add additional plugins to the compiler.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#plugins
-   */
-  plugins: [
-
-    /**
-     * Plugin: WebpackMd5Hash
-     * Description: Plugin to replace a standard webpack chunkhash with md5.
-     *
-     * See: https://www.npmjs.com/package/webpack-md5-hash
-     */
-    new WebpackMd5Hash(),
+    plugins: [
+
+      /**
+       * Plugin: WebpackMd5Hash
+       * Description: Plugin to replace a standard webpack chunkhash with md5.
+       *
+       * See: https://www.npmjs.com/package/webpack-md5-hash
+       */
+      new WebpackMd5Hash(),
+
+      /**
+       * Plugin: DedupePlugin
+       * Description: Prevents the inclusion of duplicate code into your bundle
+       * and instead applies a copy of the function at runtime.
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+       * 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,
+        'process.env': {
+          'ENV': JSON.stringify(METADATA.ENV),
+          'NODE_ENV': JSON.stringify(METADATA.ENV),
+          'HMR': METADATA.HMR
+        }
+      }),
+
+      /**
+       * Plugin: UglifyJsPlugin
+       * Description: Minimize all JavaScript output of chunks.
+       * Loaders are switched into minimizing mode.
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
+       */
+      // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
+      new UglifyJsPlugin({
+        // beautify: true, //debug
+        // mangle: false, //debug
+        // dead_code: false, //debug
+        // unused: false, //debug
+        // deadCode: false, //debug
+        // compress: {
+        //   screw_ie8: true,
+        //   keep_fnames: true,
+        //   drop_debugger: false,
+        //   dead_code: false,
+        //   unused: false
+        // }, // debug
+        // comments: true, //debug
+
+        beautify: false, // prod
+        mangle: { screw_ie8: true, keep_fnames: true }, // prod
+        compress: { screw_ie8: true }, // prod
+        comments: false // prod
+      }),
+
+      new NormalModuleReplacementPlugin(
+        /angular2-hmr/,
+        helpers.root('config/modules/angular2-hmr-prod.js')
+      )
+
+      /**
+       * Plugin: CompressionPlugin
+       * Description: Prepares compressed versions of assets to serve
+       * them with Content-Encoding
+       *
+       * See: https://github.com/webpack/compression-webpack-plugin
+       */
+      // new CompressionPlugin({
+      //   regExp: /\.css$|\.html$|\.js$|\.map$/,
+      //   threshold: 2 * 1024
+      // })
 
-    /**
-     * Plugin: DedupePlugin
-     * Description: Prevents the inclusion of duplicate code into your bundle
-     * and instead applies a copy of the function at runtime.
-     *
-     * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
-     * 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
+     * Static analysis linter for TypeScript advanced options configuration
+     * Description: An extensible linter for the TypeScript language.
      *
-     * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+     * See: https://github.com/wbuchwalter/tslint-loader
      */
-    // 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,
-      'process.env': {
-        'ENV': JSON.stringify(METADATA.ENV),
-        'NODE_ENV': JSON.stringify(METADATA.ENV),
-        'HMR': METADATA.HMR
-      }
-    }),
+    tslint: {
+      emitErrors: true,
+      failOnHint: true,
+      resourcePath: 'src'
+    },
 
     /**
-     * Plugin: UglifyJsPlugin
-     * Description: Minimize all JavaScript output of chunks.
-     * Loaders are switched into minimizing mode.
+     * Html loader advanced options
      *
-     * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
+     * See: https://github.com/webpack/html-loader#advanced-options
      */
-    // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
-    new UglifyJsPlugin({
-      // beautify: true, //debug
-      // mangle: false, //debug
-      // dead_code: false, //debug
-      // unused: false, //debug
-      // deadCode: false, //debug
-      // compress: {
-      //   screw_ie8: true,
-      //   keep_fnames: true,
-      //   drop_debugger: false,
-      //   dead_code: false,
-      //   unused: false
-      // }, // debug
-      // comments: true, //debug
-
-      beautify: false, // prod
-
-      mangle: {
-        screw_ie8: true,
-        keep_fnames: true
-      }, // prod
-
-      compress: {
-        screw_ie8: true
-      }, // prod
-
-      comments: false // prod
-    }),
-
-    /**
-     * Plugin: CompressionPlugin
-     * Description: Prepares compressed versions of assets to serve
-     * them with Content-Encoding
+    // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
+    htmlLoader: {
+      minimize: true,
+      removeAttributeQuotes: false,
+      caseSensitive: true,
+      customAttrSurround: [
+        [/#/, /(?:)/],
+        [/\*/, /(?:)/],
+        [/\[?\(?/, /(?:)/]
+      ],
+      customAttrAssign: [/\)?\]?=/]
+    },
+
+    /*
+     * Include polyfills or mocks for various node stuff
+     * Description: Node configuration
      *
-     * See: https://github.com/webpack/compression-webpack-plugin
+     * See: https://webpack.github.io/docs/configuration.html#node
      */
-    new CompressionPlugin({
-      regExp: /\.css$|\.html$|\.js$|\.map$/,
-      threshold: 2 * 1024
-    })
-
-  ],
-
-  /**
-   * Static analysis linter for TypeScript advanced options configuration
-   * Description: An extensible linter for the TypeScript language.
-   *
-   * See: https://github.com/wbuchwalter/tslint-loader
-   */
-  tslint: {
-    emitErrors: true,
-    failOnHint: true,
-    resourcePath: 'src'
-  },
-
-  /**
-   * Html loader advanced options
-   *
-   * See: https://github.com/webpack/html-loader#advanced-options
-   */
-  // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
-  htmlLoader: {
-    minimize: true,
-    removeAttributeQuotes: false,
-    caseSensitive: true,
-    customAttrSurround: [
-      [/#/, /(?:)/],
-      [/\*/, /(?:)/],
-      [/\[?\(?/, /(?:)/]
-    ],
-    customAttrAssign: [/\)?\]?=/]
-  },
-
-  /*
-   * Include polyfills or mocks for various node stuff
-   * Description: Node configuration
-   *
-   * See: https://webpack.github.io/docs/configuration.html#node
-   */
-  node: {
-    global: 'window',
-    crypto: 'empty',
-    process: false,
-    module: false,
-    clearImmediate: false,
-    setImmediate: false
-  }
-
-})
+    node: {
+      global: 'window',
+      crypto: 'empty',
+      process: false,
+      module: false,
+      clearImmediate: false,
+      setImmediate: false
+    }
+
+  })
+}