4 files changed, 57 insertions, 54 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..6edc9400c 100644
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -5,7 +5,7 @@ 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 WebpackNotifierPlugin = require('webpack-notifier')
@@ -15,7 +15,8 @@ const WebpackNotifierPlugin = require('webpack-notifier')
  */
 const METADATA = {
   title: 'PeerTube',
-  baseUrl: '/'
+  baseUrl: '/',
+  isDevServer: helpers.isWebpackDevServer()
 }
 
 /*
@@ -69,10 +70,7 @@ module.exports = {
     root: helpers.root('src'),
 
     // remove other default values
-    modulesDirectories: [ 'node_modules' ],
-
-    packageAlias: 'browser'
-
+    modulesDirectories: [ 'node_modules' ]
   },
 
   output: {
@@ -92,27 +90,15 @@ module.exports = {
      */
     preLoaders: [
 
-      /*
-       * Tslint loader support for *.ts files
-       *
-       * See: https://github.com/wbuchwalter/tslint-loader
-       */
-      // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
-
-      /*
-       * Source map loader support for *.js files
-       * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
-       *
-       * See: https://github.com/webpack/source-map-loader
-       */
       {
-        test: /\.js$/,
-        loader: 'source-map-loader',
-        exclude: [
-          // these packages have problems with their sourcemaps
-          helpers.root('node_modules/rxjs'),
-          helpers.root('node_modules/@angular')
-        ]
+        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)',
+          flags: 'g'
+        },
+        include: [helpers.root('src')]
       }
 
     ],
@@ -134,7 +120,11 @@ module.exports = {
        */
       {
         test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
+        loaders: [
+          'awesome-typescript-loader',
+          'angular2-template-loader',
+          '@angularclass/hmr-loader'
+        ],
         exclude: [/\.(spec|e2e)\.ts$/]
       },
 
@@ -194,16 +184,6 @@ module.exports = {
     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.
diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js
index 50193bf58..fede16932 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,
+  host: HOST,
+  port: PORT,
   ENV: ENV,
   HMR: HMR
 })
@@ -81,7 +84,10 @@ module.exports = webpackMerge(commonConfig, {
      *
      * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
      */
-    chunkFilename: '[id].chunk.js'
+    chunkFilename: '[id].chunk.js',
+
+    library: 'ac_[name]',
+    libraryTarget: 'var'
 
   },
 
@@ -109,7 +115,9 @@ module.exports = webpackMerge(commonConfig, {
         'NODE_ENV': JSON.stringify(METADATA.ENV),
         'HMR': METADATA.HMR
       }
-    })
+    }),
+
+    new NamedModulesPlugin()
   ],
 
   /**
@@ -124,6 +132,17 @@ module.exports = webpackMerge(commonConfig, {
     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
diff --git a/client/config/webpack.prod.js b/client/config/webpack.prod.js
index 7ce5727d3..4e7d96a4b 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')
 
 /**
@@ -110,7 +112,7 @@ module.exports = webpackMerge(commonConfig, {
      * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
      * See: https://github.com/webpack/docs/wiki/optimization#deduplication
      */
-    new DedupePlugin(),
+    // new DedupePlugin(),
 
     /**
      * Plugin: DefinePlugin
@@ -156,19 +158,16 @@ module.exports = webpackMerge(commonConfig, {
       // comments: true, //debug
 
       beautify: false, // prod
-
-      mangle: {
-        screw_ie8: true,
-        keep_fnames: true
-      }, // prod
-
-      compress: {
-        screw_ie8: true
-      }, // 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