diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index 882013a9e..5ef5621e6 100644
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -10,6 +10,8 @@ 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 LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
 const WebpackNotifierPlugin = require('webpack-notifier')
 
 /*
@@ -30,12 +32,6 @@ module.exports = function (options) {
   var isProd = options.env === 'production'
 
   return {
-    /*
-     * Static metadata for index.html
-     *
-     * See: (custom attribute)
-     */
-    metadata: METADATA,
 
     /*
      * Cache generated modules and chunks to improve performance for multiple incremental builds.
@@ -69,17 +65,9 @@ module.exports = function (options) {
        *
        * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
        */
-      extensions: [ '', '.ts', '.js', '.scss' ],
+      extensions: [ '.ts', '.js', '.json', '.scss' ],
 
-      // Make sure root is src
-      root: helpers.root('src'),
-
-      // remove other default values
-      modulesDirectories: [ 'node_modules' ]
-    },
-
-    output: {
-      publicPath: '/client/'
+      modules: [helpers.root('src'), 'node_modules']
     },
 
     /*
@@ -88,33 +76,8 @@ module.exports = function (options) {
      * See: http://webpack.github.io/docs/configuration.html#module
      */
     module: {
-      /*
-       * An array of applied pre and post loaders.
-       *
-       * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
-       */
-      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')]
-        }
-      ],
 
-      /*
-       * 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: http://webpack.github.io/docs/configuration.html#module-loaders
-       */
-      loaders: [
+      rules: [
 
         /*
          * Typescript loader support for .ts and Angular 2 async routes via .async.ts
@@ -163,10 +126,6 @@ module.exports = function (options) {
 
     },
 
-    sassLoader: {
-      precision: 10
-    },
-
     /*
      * Add additional plugins to the compiler.
      *
@@ -205,7 +164,7 @@ module.exports = function (options) {
        *
        * 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/,
@@ -241,10 +200,36 @@ module.exports = function (options) {
        */
       new HtmlWebpackPlugin({
         template: 'src/index.html',
-        chunksSortMode: 'dependency'
+        title: METADATA.title,
+        chunksSortMode: 'dependency',
+        metadata: METADATA
       }),
 
-      new WebpackNotifierPlugin({ alwaysNotify: true })
+      /*
+      * Plugin: ScriptExtHtmlWebpackPlugin
+      * Description: Enhances html-webpack-plugin functionality
+      * with different deployment options for your scripts including:
+      *
+      * See: https://github.com/numical/script-ext-html-webpack-plugin
+      */
+      new ScriptExtHtmlWebpackPlugin({
+        defaultAttribute: 'defer'
+      }),
+
+      new WebpackNotifierPlugin({ alwaysNotify: true }),
+
+      /**
+      * Plugin LoaderOptionsPlugin (experimental)
+      *
+      * See: https://gist.github.com/sokra/27b24881210b56bbaff7
+      */
+      new LoaderOptionsPlugin({
+        options: {
+          sassLoader: {
+            precision: 10
+          }
+        }
+      })
     ],
 
     /*
@@ -254,10 +239,9 @@ module.exports = function (options) {
      * See: https://webpack.github.io/docs/configuration.html#node
      */
     node: {
-      global: 'window',
+      global: 'true',
       crypto: 'empty',
-      fs: 'empty',
-      events: true,
+      process: true,
       module: false,
       clearImmediate: false,
       setImmediate: false
diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js
index 0b6c00cbd..964ea56a5 100644
--- a/client/config/webpack.dev.js
+++ b/client/config/webpack.dev.js
@@ -7,6 +7,7 @@ const commonConfig = require('./webpack.common.js') // the settings that are com
  */
 const DefinePlugin = require('webpack/lib/DefinePlugin')
 const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin')
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
 
 /**
  * Webpack Constants
@@ -30,66 +31,53 @@ const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
 module.exports = function (env) {
   return webpackMerge(commonConfig({env: ENV}), {
     /**
-     * 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
-     */
+    * 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
-     */
+    * Options affecting the output of the compilation.
+    *
+    * See: http://webpack.github.io/docs/configuration.html#output
+    */
     output: {
       /**
-       * The output directory as absolute path (required).
-       *
-       * See: http://webpack.github.io/docs/configuration.html#output-path
-       */
+      * 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
-       */
+      * 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
-       */
+      * 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
-       */
+      * inside the output.path directory.
+      *
+      * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
+      */
       chunkFilename: '[id].chunk.js',
 
       library: 'ac_[name]',
-      libraryTarget: 'var'
+      libraryTarget: 'var',
 
+      publicPath: '/client/'
     },
 
     externals: {
@@ -99,14 +87,14 @@ module.exports = function (env) {
     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
-       */
+      * 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),
@@ -118,21 +106,56 @@ module.exports = function (env) {
         }
       }),
 
-      new NamedModulesPlugin()
+      /**
+      * Plugin: NamedModulesPlugin (experimental)
+      * Description: Uses file names as module name.
+      *
+      * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
+      */
+      new NamedModulesPlugin(),
+
+      /**
+      * Plugin LoaderOptionsPlugin (experimental)
+      *
+      * See: https://gist.github.com/sokra/27b24881210b56bbaff7
+      */
+      new LoaderOptionsPlugin({
+        debug: true,
+        options: {
+
+          /**
+          * 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'
+          },
+
+          // FIXME: Remove
+          // https://github.com/bholloway/resolve-url-loader/issues/36
+          // https://github.com/jtangelder/sass-loader/issues/289
+          context: __dirname,
+          output: {
+            path: helpers.root('dist')
+          }
+
+        }
+      })
+
     ],
 
     /**
-     * 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'
-    },
-
+    * Webpack Development Server configuration
+    * Description: The webpack-dev-server is a little node.js Express server.
+    * The server emits information about the compilation state to the client,
+    * which reacts to those events.
+    *
+    * See: https://webpack.github.io/docs/webpack-dev-server.html
+    */
     devServer: {
       port: METADATA.port,
       host: METADATA.host,
@@ -145,13 +168,13 @@ module.exports = function (env) {
     },
 
     /*
-     * Include polyfills or mocks for various node stuff
-     * Description: Node configuration
-     *
-     * See: https://webpack.github.io/docs/configuration.html#node
-     */
+    * Include polyfills or mocks for various node stuff
+    * Description: Node configuration
+    *
+    * See: https://webpack.github.io/docs/configuration.html#node
+    */
     node: {
-      global: 'window',
+      global: true,
       crypto: 'empty',
       process: true,
       module: false,
diff --git a/client/config/webpack.prod.js b/client/config/webpack.prod.js
index 46db54482..ce6886af6 100644
--- a/client/config/webpack.prod.js
+++ b/client/config/webpack.prod.js
@@ -12,6 +12,7 @@ const commonConfig = require('./webpack.common.js') // the settings that are com
 // const ProvidePlugin = require('webpack/lib/ProvidePlugin')
 const DefinePlugin = require('webpack/lib/DefinePlugin')
 const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin')
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
 // const IgnorePlugin = require('webpack/lib/IgnorePlugin')
 // const DedupePlugin = require('webpack/lib/optimize/DedupePlugin')
 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
@@ -33,57 +34,52 @@ const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
 module.exports = function (env) {
   return webpackMerge(commonConfig({env: ENV}), {
     /**
-     * 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
-     */
+    * 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
-     */
+    * Options affecting the output of the compilation.
+    *
+    * See: http://webpack.github.io/docs/configuration.html#output
+    */
     output: {
+
       /**
-       * The output directory as absolute path (required).
-       *
-       * See: http://webpack.github.io/docs/configuration.html#output-path
-       */
+      * 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
-       */
+      * 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
-       */
+      * 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'
+      * 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',
 
+      publicPath: '/client/'
     },
 
     externals: {
@@ -134,14 +130,13 @@ module.exports = function (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
-       */
+/**
+      * 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
@@ -159,68 +154,101 @@ module.exports = function (env) {
         // 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
-       * them with Content-Encoding
-       *
-       * See: https://github.com/webpack/compression-webpack-plugin
-       */
+      * Plugin: IgnorePlugin
+      * Description: Don’t generate modules for requests matching the provided RegExp.
+      *
+      * See: http://webpack.github.io/docs/list-of-plugins.html#ignoreplugin
+      */
+
+      // new IgnorePlugin(/angular2-hmr/),
+
+      /**
+      * Plugin: CompressionPlugin
+      * Description: Prepares compressed versions of assets to serve
+      * them with Content-Encoding
+      *
+      * See: https://github.com/webpack/compression-webpack-plugin
+      */
+      //  install compression-webpack-plugin
       // new CompressionPlugin({
       //   regExp: /\.css$|\.html$|\.js$|\.map$/,
       //   threshold: 2 * 1024
       // })
 
+      /**
+      * Plugin LoaderOptionsPlugin (experimental)
+      *
+      * See: https://gist.github.com/sokra/27b24881210b56bbaff7
+      */
+      new LoaderOptionsPlugin({
+        debug: false,
+        options: {
+
+          /**
+          * 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: [/\)?\]?=/]
+          },
+
+          // FIXME: Remove
+          // https://github.com/bholloway/resolve-url-loader/issues/36
+          // https://github.com/jtangelder/sass-loader/issues/289
+          context: __dirname,
+          output: {
+            path: helpers.root('dist')
+          }
+        }
+      })
     ],
 
-    /**
-     * 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
-     */
+    * Include polyfills or mocks for various node stuff
+    * Description: Node configuration
+    *
+    * See: https://webpack.github.io/docs/configuration.html#node
+    */
     node: {
-      global: 'window',
+      global: true,
       crypto: 'empty',
       process: false,
       module: false,
diff --git a/client/package.json b/client/package.json
index cf3cdd954..ab15d1ba3 100644
--- a/client/package.json
+++ b/client/package.json
@@ -60,6 +60,7 @@
     "resolve-url-loader": "^1.6.0",
     "rxjs": "^5.0.0-rc.1",
     "sass-loader": "^4.0.2",
+    "script-ext-html-webpack-plugin": "^1.3.2",
     "source-map-loader": "^0.1.5",
     "string-replace-loader": "^1.0.3",
     "style-loader": "^0.13.1",
@@ -68,7 +69,7 @@
     "tslint-loader": "^2.1.4",
     "typescript": "^2.0.0",
     "url-loader": "^0.5.7",
-    "webpack": "2.1.0-beta.22",
+    "webpack": "2.1.0-beta.25",
     "webpack-md5-hash": "0.0.5",
     "webpack-merge": "^0.15.0",
     "webpack-notifier": "^1.3.0",
diff --git a/client/src/index.html b/client/src/index.html
index f39d8d2cf..7ae8fc54f 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -1,9 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <base href="/">
-
-    <title>PeerTube</title>
+    <title><%= htmlWebpackPlugin.options.title %></title>
 
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -12,11 +10,16 @@
 
     <!-- TODO: bundle it with webpack when https://github.com/webpack/webpack/pull/1931 will be merged -->
     <script src="/client/assets/webtorrent/webtorrent.min.js"></script>
+
+    <!-- base url -->
+    <base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
   </head>
 
   <!-- 3. Display the application -->
   <body>
+
     <my-app>
     </my-app>
+
   </body>
 </html>