From: Chocobozzz <florian.bigard@gmail.com>
Date: Sun, 23 Jul 2017 12:49:52 +0000 (+0200)
Subject: Process embed in webpack too
X-Git-Tag: v0.0.1-alpha~359
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=202e72231750705b1a071d57206424eef1fc5be1;p=oweals%2Fpeertube.git

Process embed in webpack too
---

diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index da900da85..5f6d254cc 100644
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -8,7 +8,6 @@ const AssetsPlugin = require('assets-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
@@ -252,47 +251,6 @@ module.exports = function (options) {
         }
       ),
 
-      /*
-       * Plugin: CopyWebpackPlugin
-       * Description: Copy files and directories in webpack.
-       *
-       * Copies project static assets.
-       *
-       * See: https://www.npmjs.com/package/copy-webpack-plugin
-       */
-
-      // Used by embed.html
-      new CopyWebpackPlugin([
-        {
-          from: 'src/assets',
-          to: 'assets'
-        },
-        {
-          from: 'node_modules/webtorrent/webtorrent.min.js',
-          to: 'assets/webtorrent'
-        },
-        {
-          from: 'node_modules/video.js/dist/video.min.js',
-          to: 'assets/video-js'
-        },
-        {
-          from: 'node_modules/video.js/dist/video-js.min.css',
-          to: 'assets/video-js'
-        },
-        {
-          from: 'node_modules/videojs-dock/dist/videojs-dock.min.js',
-          to: 'assets/video-js'
-        },
-        {
-          from: 'node_modules/videojs-dock/dist/videojs-dock.css',
-          to: 'assets/video-js'
-        },
-        {
-          from: 'src/standalone',
-          to: 'standalone'
-        }
-      ]),
-
       /*
        * Plugin: ScriptExtHtmlWebpackPlugin
        * Description: Enhances html-webpack-plugin functionality
diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js
index c472ac762..9cf09db0f 100644
--- a/client/config/webpack.dev.js
+++ b/client/config/webpack.dev.js
@@ -2,6 +2,7 @@ const helpers = require('./helpers')
 const webpackMerge = require('webpack-merge') // used to merge webpack configs
 const webpackMergeDll = webpackMerge.strategy({plugins: 'replace'})
 const commonConfig = require('./webpack.common.js') // the settings that are common to prod and dev
+const videoEmbedConfig = require('./webpack.video-embed.js')
 
 /**
  * Webpack Plugins
@@ -34,220 +35,225 @@ const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
 module.exports = function (env) {
-  return webpackMerge(commonConfig({ env: ENV }), {
-    /**
-    * 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: {
-      /**
-      * The output directory as absolute path (required).
-      *
-      * See: http://webpack.github.io/docs/configuration.html#output-path
-      */
-      path: helpers.root('dist'),
+  return [
 
+    webpackMerge(commonConfig({ env: ENV }), {
       /**
-      * 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].bundle.js',
+      devtool: 'cheap-module-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].map',
+      output: {
+        /**
+        * The output directory as absolute path (required).
+        *
+        * See: http://webpack.github.io/docs/configuration.html#output-path
+        */
+        path: helpers.root('dist'),
 
-      /** 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'
-    },
-
-    module: {
-
-      // Too slow, life is short
-      // rules: [
-      //   {
-      //     test: /\.ts$/,
-      //     use: [
-      //       {
-      //         loader: 'tslint-loader',
-      //         options: {
-      //           configFile: 'tslint.json'
-      //         }
-      //       }
-      //     ],
-      //     exclude: [
-      //       /\.(spec|e2e)\.ts$/,
-      //       /node_modules\//
-      //     ]
-      //   }
-      // ]
-    },
-
-    plugins: [
+        /**
+        * 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',
 
-      /**
-      * 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,
-        'API_URL': JSON.stringify(METADATA.API_URL),
-        'process.version': JSON.stringify(process.version),
-        'process.env': {
+        /**
+        * 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'
+      },
+
+      module: {
+
+        // Too slow, life is short
+        // rules: [
+        //   {
+        //     test: /\.ts$/,
+        //     use: [
+        //       {
+        //         loader: 'tslint-loader',
+        //         options: {
+        //           configFile: 'tslint.json'
+        //         }
+        //       }
+        //     ],
+        //     exclude: [
+        //       /\.(spec|e2e)\.ts$/,
+        //       /node_modules\//
+        //     ]
+        //   }
+        // ]
+      },
+
+      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),
-          'NODE_ENV': JSON.stringify(METADATA.ENV),
-          'HMR': METADATA.HMR
-        }
-      }),
-
-      new DllBundlesPlugin({
-        bundles: {
-          polyfills: [
-            'core-js',
-            {
-              name: 'zone.js',
-              path: 'zone.js/dist/zone.js'
+          'HMR': METADATA.HMR,
+          'API_URL': JSON.stringify(METADATA.API_URL),
+          'process.version': JSON.stringify(process.version),
+          'process.env': {
+            'ENV': JSON.stringify(METADATA.ENV),
+            'NODE_ENV': JSON.stringify(METADATA.ENV),
+            'HMR': METADATA.HMR
+          }
+        }),
+
+        new DllBundlesPlugin({
+          bundles: {
+            polyfills: [
+              'core-js',
+              {
+                name: 'zone.js',
+                path: 'zone.js/dist/zone.js'
+              },
+              {
+                name: 'zone.js',
+                path: 'zone.js/dist/long-stack-trace-zone.js'
+              }
+            ],
+            vendor: [
+              '@angular/platform-browser',
+              '@angular/platform-browser-dynamic',
+              '@angular/core',
+              '@angular/common',
+              '@angular/forms',
+              '@angular/http',
+              '@angular/router',
+              '@angularclass/hmr',
+              'rxjs'
+            ]
+          },
+          dllDir: helpers.root('dll'),
+          webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
+            devtool: 'cheap-module-source-map',
+            plugins: []
+          })
+        }),
+
+        /**
+         * Plugin: AddAssetHtmlPlugin
+         * Description: Adds the given JS or CSS file to the files
+         * Webpack knows about, and put it into the list of assets
+         * html-webpack-plugin injects into the generated html.
+         *
+         * See: https://github.com/SimenB/add-asset-html-webpack-plugin
+         */
+        new AddAssetHtmlPlugin([
+          { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
+          { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
+        ]),
+
+        /**
+        * 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,
+              typeCheck: true,
+              resourcePath: 'src'
             },
-            {
-              name: 'zone.js',
-              path: 'zone.js/dist/long-stack-trace-zone.js'
+
+            // 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')
             }
-          ],
-          vendor: [
-            '@angular/platform-browser',
-            '@angular/platform-browser-dynamic',
-            '@angular/core',
-            '@angular/common',
-            '@angular/forms',
-            '@angular/http',
-            '@angular/router',
-            '@angularclass/hmr',
-            'rxjs'
-          ]
-        },
-        dllDir: helpers.root('dll'),
-        webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
-          devtool: 'cheap-module-source-map',
-          plugins: []
+
+          }
         })
-      }),
 
-      /**
-       * Plugin: AddAssetHtmlPlugin
-       * Description: Adds the given JS or CSS file to the files
-       * Webpack knows about, and put it into the list of assets
-       * html-webpack-plugin injects into the generated html.
-       *
-       * See: https://github.com/SimenB/add-asset-html-webpack-plugin
-       */
-      new AddAssetHtmlPlugin([
-        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
-        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
-      ]),
+      ],
 
       /**
-      * Plugin: NamedModulesPlugin (experimental)
-      * Description: Uses file names as module name.
+      * 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://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
+      * See: https://webpack.github.io/docs/webpack-dev-server.html
       */
-      new NamedModulesPlugin(),
+      devServer: {
+        port: METADATA.port,
+        host: METADATA.host,
+        historyApiFallback: true,
+        watchOptions: {
+          ignored: /node_modules/
+        }
+      },
 
-      /**
-      * Plugin LoaderOptionsPlugin (experimental)
+      /*
+      * Include polyfills or mocks for various node stuff
+      * Description: Node configuration
       *
-      * See: https://gist.github.com/sokra/27b24881210b56bbaff7
+      * See: https://webpack.github.io/docs/configuration.html#node
       */
-      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,
-            typeCheck: true,
-            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')
-          }
-
-        }
-      })
-
-    ],
-
-    /**
-    * 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,
-      historyApiFallback: true,
-      watchOptions: {
-        ignored: /node_modules/
+      node: {
+        global: true,
+        crypto: 'empty',
+        fs: 'empty',
+        process: true,
+        module: false,
+        clearImmediate: false,
+        setImmediate: false
       }
-    },
-
-    /*
-    * Include polyfills or mocks for various node stuff
-    * Description: Node configuration
-    *
-    * See: https://webpack.github.io/docs/configuration.html#node
-    */
-    node: {
-      global: true,
-      crypto: 'empty',
-      fs: 'empty',
-      process: true,
-      module: false,
-      clearImmediate: false,
-      setImmediate: false
-    }
-  })
+    }),
+
+    videoEmbedConfig({env: ENV})
+  ]
 }
diff --git a/client/config/webpack.prod.js b/client/config/webpack.prod.js
index 4f33961f5..ddc9343a7 100644
--- a/client/config/webpack.prod.js
+++ b/client/config/webpack.prod.js
@@ -5,6 +5,7 @@
 const helpers = require('./helpers')
 const webpackMerge = require('webpack-merge') // used to merge webpack configs
 const commonConfig = require('./webpack.common.js') // the settings that are common to prod and dev
+const videoEmbedConfig = require('./webpack.video-embed.js')
 
 /**
  * Webpack Plugins
@@ -31,266 +32,270 @@ const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
 })
 
 module.exports = function (env) {
-  return webpackMerge(commonConfig({env: ENV}), {
-    /**
-    * 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: {
+  return [
+    videoEmbedConfig({ env: ENV }),
 
+    webpackMerge(commonConfig({ env: ENV }), {
       /**
-      * The output directory as absolute path (required).
+      * Developer tool to enhance debugging
       *
-      * See: http://webpack.github.io/docs/configuration.html#output-path
+      * See: http://webpack.github.io/docs/configuration.html#devtool
+      * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
       */
-      path: helpers.root('dist'),
+      devtool: 'source-map',
 
       /**
-      * Specifies the name of each output file on disk.
-      * IMPORTANT: You must not specify an absolute path here!
+      * Options affecting the output of the compilation.
       *
-      * See: http://webpack.github.io/docs/configuration.html#output-filename
+      * See: http://webpack.github.io/docs/configuration.html#output
       */
-      filename: '[name].[chunkhash].bundle.js',
+      output: {
 
-      /**
-      * 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: '[file].map',
+        /**
+        * The output directory as absolute path (required).
+        *
+        * See: http://webpack.github.io/docs/configuration.html#output-path
+        */
+        path: helpers.root('dist'),
 
-      /**
-      * 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: '[name].[chunkhash].chunk.js',
+        /**
+        * 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: '[file].map',
 
-      publicPath: '/client/'
-    },
+        /**
+        * 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: '[name].[chunkhash].chunk.js',
 
-    module: {
-      rules: [
-        {
-          test: /junk\/index\.js$/,
-          // exclude: /(node_modules|bower_components)/,
-          use: {
-            loader: 'babel-loader',
-            options: {
-              presets: [ 'env' ]
+        publicPath: '/client/'
+      },
+
+      module: {
+        rules: [
+          {
+            test: /junk\/index\.js$/,
+            // exclude: /(node_modules|bower_components)/,
+            use: {
+              loader: 'babel-loader',
+              options: {
+                presets: [ 'env' ]
+              }
             }
           }
-        }
-      ]
-    },
-
-    /**
-     * Add additional plugins to the compiler.
-     *
-     * See: http://webpack.github.io/docs/configuration.html#plugins
-     */
-    plugins: [
+        ]
+      },
 
       /**
-       * Webpack plugin to optimize a JavaScript file for faster initial load
-       * by wrapping eagerly-invoked functions.
+       * Add additional plugins to the compiler.
        *
-       * See: https://github.com/vigneshshanmugam/optimize-js-plugin
+       * See: http://webpack.github.io/docs/configuration.html#plugins
        */
+      plugins: [
 
-      new OptimizeJsPlugin({
-        sourceMap: false
-      }),
+        /**
+         * Webpack plugin to optimize a JavaScript file for faster initial load
+         * by wrapping eagerly-invoked functions.
+         *
+         * See: https://github.com/vigneshshanmugam/optimize-js-plugin
+         */
 
-      /**
-       * 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(),
+        new OptimizeJsPlugin({
+          sourceMap: false
+        }),
 
-      /**
-       * 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,
-        'API_URL': JSON.stringify(METADATA.API_URL),
-        'process.version': JSON.stringify(process.version),
-        'process.env': {
+        /**
+         * 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),
-          'NODE_ENV': JSON.stringify(METADATA.ENV),
-          'HMR': METADATA.HMR
-        }
-      }),
+          'HMR': METADATA.HMR,
+          'API_URL': JSON.stringify(METADATA.API_URL),
+          'process.version': JSON.stringify(process.version),
+          '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
+        /**
+        * 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
-        output: {
-          comments: false
-        }, // prod
-        mangle: {
-          screw_ie8: true
-        }, // prod
-        compress: {
-          screw_ie8: true,
-          warnings: false,
-          conditionals: true,
-          unused: true,
-          comparisons: true,
-          sequences: true,
-          dead_code: true,
-          evaluate: true,
-          if_return: true,
-          join_vars: true,
-          negate_iife: false // we need this for lazy v8
-        }
-      }),
+          beautify: false, // prod
+          output: {
+            comments: false
+          }, // prod
+          mangle: {
+            screw_ie8: true
+          }, // prod
+          compress: {
+            screw_ie8: true,
+            warnings: false,
+            conditionals: true,
+            unused: true,
+            comparisons: true,
+            sequences: true,
+            dead_code: true,
+            evaluate: true,
+            if_return: true,
+            join_vars: true,
+            negate_iife: false // we need this for lazy v8
+          }
+        }),
 
-      new NormalModuleReplacementPlugin(
-        /angular2-hmr/,
-        helpers.root('config/empty.js')
-      ),
+        new NormalModuleReplacementPlugin(
+          /angular2-hmr/,
+          helpers.root('config/empty.js')
+        ),
 
-      new NormalModuleReplacementPlugin(
-        /zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/,
-        helpers.root('config/empty.js')
-      ),
+        new NormalModuleReplacementPlugin(
+          /zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/,
+          helpers.root('config/empty.js')
+        ),
 
-      new HashedModuleIdsPlugin(),
+        new HashedModuleIdsPlugin(),
 
-      /**
-      * Plugin: IgnorePlugin
-      * Description: Don’t generate modules for requests matching the provided RegExp.
-      *
-      * See: http://webpack.github.io/docs/list-of-plugins.html#ignoreplugin
-      */
+        /**
+        * 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/),
+        // 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: 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({
-        minimize: true,
-        debug: false,
-        options: {
+        /**
+        * Plugin LoaderOptionsPlugin (experimental)
+        *
+        * See: https://gist.github.com/sokra/27b24881210b56bbaff7
+        */
+        new LoaderOptionsPlugin({
+          minimize: true,
+          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'
-          },
+            /**
+            * 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: [/\)?]?=/]
-          },
+            /**
+            * 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')
+            // 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')
+            }
           }
-        }
-      })
-    ],
+        })
+      ],
 
-    /*
-    * Include polyfills or mocks for various node stuff
-    * Description: Node configuration
-    *
-    * See: https://webpack.github.io/docs/configuration.html#node
-    */
-    node: {
-      global: true,
-      crypto: 'empty',
-      fs: 'empty',
-      process: true,
-      module: false,
-      clearImmediate: false,
-      setImmediate: false
-    }
+      /*
+      * Include polyfills or mocks for various node stuff
+      * Description: Node configuration
+      *
+      * See: https://webpack.github.io/docs/configuration.html#node
+      */
+      node: {
+        global: true,
+        crypto: 'empty',
+        fs: 'empty',
+        process: true,
+        module: false,
+        clearImmediate: false,
+        setImmediate: false
+      }
 
-  })
+    })
+  ]
 }
diff --git a/client/config/webpack.video-embed.js b/client/config/webpack.video-embed.js
new file mode 100644
index 000000000..a04d5be8b
--- /dev/null
+++ b/client/config/webpack.video-embed.js
@@ -0,0 +1,183 @@
+const helpers = require('./helpers')
+
+const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
+const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const PurifyCSSPlugin = require('purifycss-webpack')
+
+module.exports = function (options) {
+  const isProd = options.env === 'production'
+
+  const configuration = {
+    entry: {
+      'video-embed': './src/standalone/videos/embed.ts'
+    },
+
+    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', '.json', '.scss' ],
+
+      modules: [ helpers.root('src'), helpers.root('node_modules') ]
+    },
+
+    output: {
+      path: helpers.root('dist/standalone/videos'),
+      filename: '[name].[hash].bundle.js',
+      sourceMapFilename: '[file].map',
+      chunkFilename: '[id].chunk.js',
+      publicPath: '/client/standalone/videos/'
+    },
+
+    module: {
+
+      rules: [
+        {
+          test: /\.ts$/,
+          use: [
+            {
+              loader: 'awesome-typescript-loader',
+              options: {
+                configFileName: 'tsconfig.webpack.json',
+                useCache: !isProd
+              }
+            }
+          ],
+          exclude: [/\.(spec|e2e)\.ts$/]
+        },
+
+        {
+          test: /\.(sass|scss)$/,
+          use: ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: [
+              {
+                loader: 'css-loader',
+                options: {
+                  sourceMap: true,
+                  importLoaders: 1
+                }
+              },
+              'resolve-url-loader',
+              {
+                loader: 'sass-loader',
+                options: {
+                  sourceMap: true
+                }
+              },
+              {
+                loader: 'sass-resources-loader',
+                options: {
+                  resources: [
+                    helpers.root('src/sass/_variables.scss')
+                  ]
+                }
+              }
+            ]
+          })
+        },
+
+        {
+          test: /\.html$/,
+          use: 'raw-loader',
+          exclude: [
+            helpers.root('src/index.html'),
+            helpers.root('src/standalone/videos/embed.html')
+          ]
+        },
+
+        {
+          test: /\.(jpg|png|gif)$/,
+          use: 'url-loader'
+        },
+
+        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' },
+        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'file-loader' }
+      ]
+
+    },
+
+    plugins: [
+      new ExtractTextPlugin({
+        filename: '[name].[contenthash].css'
+      }),
+
+      new PurifyCSSPlugin({
+        paths: [ helpers.root('src/standalone/videos/embed.ts') ],
+        purifyOptions: {
+          minify: true,
+          whitelist: [ '*vjs*', '*video-js*' ]
+        }
+      }),
+
+      new CheckerPlugin(),
+
+      new HtmlWebpackPlugin({
+        template: 'src/standalone/videos/embed.html',
+        filename: 'embed.html',
+        title: 'PeerTube',
+        chunksSortMode: 'dependency',
+        inject: 'body'
+      })
+    ],
+
+    node: {
+      global: true,
+      crypto: 'empty',
+      fs: 'empty',
+      process: true,
+      module: false,
+      clearImmediate: false,
+      setImmediate: false
+    }
+  }
+
+  if (isProd) {
+    configuration.module.rules.push(
+      {
+        test: /junk\/index\.js$/,
+        // exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [ 'env' ]
+          }
+        }
+      }
+   )
+
+    configuration.plugins.push(
+      new UglifyJsPlugin({
+        beautify: false,
+        output: {
+          comments: false
+        }, // prod
+        mangle: {
+          screw_ie8: true
+        }, // prod
+        compress: {
+          screw_ie8: true,
+          warnings: false,
+          conditionals: true,
+          unused: true,
+          comparisons: true,
+          sequences: true,
+          dead_code: true,
+          evaluate: true,
+          if_return: true,
+          join_vars: true,
+          negate_iife: false // we need this for lazy v8
+        }
+      }),
+
+      new HashedModuleIdsPlugin()
+    )
+  }
+
+  return configuration
+}
diff --git a/client/package.json b/client/package.json
index b19a3e57d..f66c6e2c2 100644
--- a/client/package.json
+++ b/client/package.json
@@ -86,7 +86,7 @@
     "url-loader": "^0.5.7",
     "video.js": "^6.2.0",
     "videojs-dock": "^2.0.2",
-    "webpack": "^3.0.0",
+    "webpack": "^3.3.0",
     "webpack-merge": "~4.1.0",
     "webpack-notifier": "^1.3.0",
     "webtorrent": "^0.98.0",
@@ -96,6 +96,9 @@
     "@types/webtorrent": "^0.98.4",
     "add-asset-html-webpack-plugin": "^2.0.1",
     "codelyzer": "^3.0.0-beta.4",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "purify-css": "^1.2.5",
+    "purifycss-webpack": "^0.7.0",
     "standard": "^10.0.0",
     "tslint-config-standard": "^6.0.1",
     "webpack-bundle-analyzer": "^2.8.2",
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index f72080937..627acb5af 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -7,143 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="icon" type="image/png" href="/client/assets/favicon.png" />
-
-    <link rel="stylesheet" href="/client/assets/video-js/video-js.min.css">
-    <link rel="stylesheet" href="/client/assets/video-js/videojs-dock.css">
-
-    <script src="/client/assets/webtorrent/webtorrent.min.js"></script>
-    <script src="/client/assets/video-js/video.min.js"></script>
-    <script src="/client/assets/video-js/videojs-dock.min.js"></script>
-
-    <style>
-      video {
-        width: 99%;
-      }
-
-      /* fill the entire space */
-      html, body {
-        height: 100%;
-        margin: 0;
-      }
-
-      .video-js {
-        width: 100%;
-        height: 100%;
-      }
-
-      .vjs-poster {
-        background-size: 100% auto;
-      }
-
-      .vjs-peertube-link {
-        color: white;
-        text-decoration: none;
-        font-size: 1.3em;
-        line-height: 2.20;
-        transition: all .4s;
-      }
-
-      .vjs-peertube-link:hover {
-        text-shadow: 0 0 1em #fff;
-      }
-
-    </style>
   </head>
 
   <body>
 
-  <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered">
-  </video>
-
-
-  <script>
-  function loadVideoInfos (videoId, callback) {
-    var xhttp = new XMLHttpRequest()
-    xhttp.onreadystatechange = function () {
-      if (this.readyState === 4 && this.status === 200) {
-        var json = JSON.parse(this.responseText)
-        return callback(json)
-      }
-    }
-
-    var url = window.location.origin + '/api/v1/videos/' + videoId
-    xhttp.open('GET', url, true)
-    xhttp.send()
-  }
-
-  function loadVideoTorrent (magnetUri, player) {
-    console.log('Loading video ' + videoId)
-    var client = new window.WebTorrent()
-
-    console.log('Adding magnet ' + magnetUri)
-    client.add(magnetUri, function (torrent) {
-      var file = torrent.files[0]
-
-      file.renderTo('video', function (err) {
-        if (err) {
-          console.error(err)
-          return
-        }
-
-        // Hack to "simulate" src link in video.js >= 6
-        // If no, we can't play the video after pausing it
-        // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
-        player.src = function () { return true }
-
-        player.play()
-      })
-    })
-  }
-
-  var urlParts = window.location.href.split('/')
-  var videoId = urlParts[urlParts.length - 1]
-
-  loadVideoInfos(videoId, function (videoInfos) {
-    var magnetUri = videoInfos.magnetUri
-    var videoContainer = document.getElementById('video-container')
-    var previewUrl = window.location.origin + videoInfos.previewPath
-    videoContainer.poster = previewUrl
-
-    videojs('video-container', { controls: true, autoplay: false }, function () {
-      var player = this
-
-      var Button = videojs.getComponent('Button')
-      var peertubeLinkButton = videojs.extend(Button, {
-        constructor: function () {
-          Button.apply(this, arguments)
-        },
-
-        createEl: function () {
-          var link = document.createElement('a')
-          link.href = window.location.href.replace('embed', 'watch')
-          link.innerHTML = 'PeerTube'
-          link.title = 'Go to the video page'
-          link.className = 'vjs-peertube-link'
-          link.target = '_blank'
-
-          return link
-        },
-
-        handleClick: function () {
-          player.pause()
-        }
-      })
-      videojs.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
-
-      var controlBar = player.getChild('controlBar')
-      var addedLink = controlBar.addChild('PeerTubeLinkButton', {})
-      controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
-
-      player.dock({
-        title: videoInfos.name
-      })
-
-      document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
-        loadVideoTorrent(magnetUri, player)
-      }, false)
-    })
-  })
+    <video id="video-container" class="video-js vjs-sublime-skin vjs-big-play-centered">
+    </video>
 
-  </script>
   </body>
 </html
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
new file mode 100644
index 000000000..a4c44a59b
--- /dev/null
+++ b/client/src/standalone/videos/embed.scss
@@ -0,0 +1,41 @@
+@import '~video.js/dist/video-js.css';
+@import '~videojs-dock/dist/videojs-dock.css';
+@import '../../sass/video-js-custom.scss';
+
+video {
+  width: 99%;
+}
+
+/* fill the entire space */
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+.video-js {
+  width: 100%;
+  height: 100%;
+}
+
+.vjs-poster {
+  background-size: 100% auto;
+}
+
+.vjs-peertube-link {
+  color: white;
+  text-decoration: none;
+  font-size: 1.3em;
+  line-height: 2.20;
+  transition: all .4s;
+  position: relative;
+  right: 6px;
+}
+
+.vjs-peertube-link:hover {
+  text-shadow: 0 0 1em #fff;
+}
+
+// Fix volume panel because we added a new component (PeerTube link)
+.vjs-volume-panel {
+  margin-right: 90px !important;
+}
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
new file mode 100644
index 000000000..64a0f0798
--- /dev/null
+++ b/client/src/standalone/videos/embed.ts
@@ -0,0 +1,103 @@
+import './embed.scss'
+
+import videojs from 'video.js'
+import 'videojs-dock/dist/videojs-dock.es.js'
+import * as WebTorrent from 'webtorrent'
+import { Video } from '../../../../shared'
+
+// videojs typings don't have some method we need
+const videojsUntyped = videojs as any
+
+function loadVideoInfos (videoId: string, callback: (err: Error, res?: Video) => void) {
+  const xhttp = new XMLHttpRequest()
+  xhttp.onreadystatechange = function () {
+    if (this.readyState === 4 && this.status === 200) {
+      const json = JSON.parse(this.responseText)
+      return callback(null, json)
+    }
+  }
+
+  xhttp.onerror = err => callback(err.error)
+
+  const url = window.location.origin + '/api/v1/videos/' + videoId
+  xhttp.open('GET', url, true)
+  xhttp.send()
+}
+
+function loadVideoTorrent (magnetUri: string, player: videojs.Player) {
+  console.log('Loading video ' + videoId)
+  const client = new WebTorrent()
+
+  console.log('Adding magnet ' + magnetUri)
+  client.add(magnetUri, torrent => {
+    const file = torrent.files[0]
+
+    file.renderTo('video', err => {
+      if (err) {
+        console.error(err)
+        return
+      }
+
+      // Hack to "simulate" src link in video.js >= 6
+      // If no, we can't play the video after pausing it
+      // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
+      (player as any).src = () => true
+
+      player.play()
+    })
+  })
+}
+
+const urlParts = window.location.href.split('/')
+const videoId = urlParts[urlParts.length - 1]
+
+loadVideoInfos(videoId, (err, videoInfos) => {
+  if (err) {
+    console.error(err)
+    return
+  }
+
+  const magnetUri = videoInfos.magnetUri
+  const videoContainer = document.getElementById('video-container') as HTMLVideoElement
+  const previewUrl = window.location.origin + videoInfos.previewPath
+  videoContainer.poster = previewUrl
+
+  videojs('video-container', { controls: true, autoplay: false }, function () {
+    const player = this
+
+    const Button = videojsUntyped.getComponent('Button')
+    const peertubeLinkButton = videojsUntyped.extend(Button, {
+      constructor: function () {
+        Button.apply(this, arguments)
+      },
+
+      createEl: function () {
+        const link = document.createElement('a')
+        link.href = window.location.href.replace('embed', 'watch')
+        link.innerHTML = 'PeerTube'
+        link.title = 'Go to the video page'
+        link.className = 'vjs-peertube-link'
+        link.target = '_blank'
+
+        return link
+      },
+
+      handleClick: function () {
+        player.pause()
+      }
+    })
+    videojsUntyped.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
+
+    const controlBar = player.getChild('controlBar')
+    const addedLink = controlBar.addChild('PeerTubeLinkButton', {})
+    controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
+
+    player.dock({
+      title: videoInfos.name
+    })
+
+    document.querySelector('.vjs-big-play-button').addEventListener('click', () => {
+      loadVideoTorrent(magnetUri, player)
+    }, false)
+  })
+})
diff --git a/client/yarn.lock b/client/yarn.lock
index 9a6aff1b2..a8bd103dc 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -235,7 +235,7 @@ ajv-keywords@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
 
-ajv@^4.7.0, ajv@^4.9.1:
+ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
   dependencies:
@@ -442,7 +442,7 @@ async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.1.2, async@^2.1.4, async@^2.1.5:
+async@^2.1.2, async@^2.1.4, async@^2.1.5, async@^2.4.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -1309,7 +1309,7 @@ camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
-camelcase@^4.0.0:
+camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
 
@@ -1366,7 +1366,7 @@ chalk@^2.0.1:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
-chokidar@^1.4.3, chokidar@^1.6.0:
+chokidar@^1.6.0, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   dependencies:
@@ -1415,6 +1415,12 @@ clean-css@4.1.x:
   dependencies:
     source-map "0.5.x"
 
+clean-css@^4.0.12:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.7.tgz#b9aea4f85679889cf3eae8b40349ec4ebdfdd032"
+  dependencies:
+    source-map "0.5.x"
+
 cli-cursor@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
@@ -1548,7 +1554,7 @@ commander@2.9.x, commander@~2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.9.0:
+commander@^2.9.0, commander@~2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
 
@@ -1711,6 +1717,14 @@ cross-spawn@^3.0.0:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
+cross-spawn@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
@@ -2129,7 +2143,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^3.0.0, enhanced-resolve@^3.1.0:
+enhanced-resolve@^3.1.0, enhanced-resolve@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.3.0.tgz#950964ecc7f0332a42321b673b38dc8ff15535b3"
   dependencies:
@@ -2437,6 +2451,18 @@ evp_bytestokey@^1.0.0:
   dependencies:
     create-hash "^1.1.1"
 
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -2507,6 +2533,15 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
+extract-text-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.0.tgz#90caa7907bc449f335005e3ac7532b41b00de612"
+  dependencies:
+    async "^2.4.1"
+    loader-utils "^1.1.0"
+    schema-utils "^0.3.0"
+    webpack-sources "^1.0.1"
+
 extsprintf@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
@@ -2780,6 +2815,10 @@ get-stdin@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
 
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
 getpass@^0.1.1:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
@@ -3364,6 +3403,10 @@ is-resolvable@^1.0.0:
   dependencies:
     tryit "^1.0.1"
 
+is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
 is-svg@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
@@ -3904,6 +3947,12 @@ mediasource@^2.0.0, mediasource@^2.1.0:
     readable-stream "^2.0.5"
     to-arraybuffer "^1.0.1"
 
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.0"
+
 memory-chunk-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/memory-chunk-store/-/memory-chunk-store-1.2.0.tgz#c8fb00528242eb3c44afd74b33e6b40c37b6eca0"
@@ -3985,6 +4034,10 @@ mime@1.3.x, mime@^1.3.4:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
 
+mimic-fn@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+
 min-document@^2.19.0, min-document@^2.6.1:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@@ -4317,6 +4370,12 @@ normalize.css@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf"
 
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
 "npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
@@ -4454,6 +4513,14 @@ os-locale@^1.4.0:
   dependencies:
     lcid "^1.0.0"
 
+os-locale@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
+  dependencies:
+    execa "^0.7.0"
+    lcid "^1.0.0"
+    mem "^1.1.0"
+
 os-tmpdir@^1.0.0, os-tmpdir@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
@@ -4465,6 +4532,10 @@ osenv@0, osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+
 p-limit@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
@@ -4571,6 +4642,10 @@ path-is-inside@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
 
+path-key@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
 path-parse@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
@@ -4587,6 +4662,12 @@ path-type@^1.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  dependencies:
+    pify "^2.0.0"
+
 pbkdf2@^3.0.3:
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.12.tgz#be36785c5067ea48d806ff923288c5f750b6b8a2"
@@ -5014,6 +5095,23 @@ punycode@^1.2.4, punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
+purify-css@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/purify-css/-/purify-css-1.2.5.tgz#c4b9ec90735765f3e247ba6a3b49f132f3482500"
+  dependencies:
+    clean-css "^4.0.12"
+    glob "^7.1.1"
+    rework "^1.0.1"
+    uglify-js "^3.0.6"
+    yargs "^8.0.1"
+
+purifycss-webpack@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/purifycss-webpack/-/purifycss-webpack-0.7.0.tgz#07c9ce7988f608f1928102ed3ff19178ce38f0e0"
+  dependencies:
+    ajv "^4.11.2"
+    webpack-sources "^0.1.4"
+
 q@^1.1.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
@@ -5103,6 +5201,13 @@ read-pkg-up@^1.0.1:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
 
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
 read-pkg@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
@@ -5111,6 +5216,14 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
 readable-stream@1.0:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
@@ -5594,6 +5707,16 @@ shallow-clone@^0.1.2:
     lazy-cache "^0.2.3"
     mixin-object "^2.0.1"
 
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
 shelljs@^0.7.5:
   version "0.7.8"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
@@ -5956,6 +6079,10 @@ strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
 
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
@@ -6285,11 +6412,18 @@ uglify-js@^2.8.29:
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
+uglify-js@^3.0.6:
+  version "3.0.26"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.26.tgz#ba279ca597b13fe6c62c2d87dd5188e57a7a3233"
+  dependencies:
+    commander "~2.11.0"
+    source-map "~0.5.1"
+
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
-uglifyjs-webpack-plugin@^0.4.4:
+uglifyjs-webpack-plugin@^0.4.6:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz#b951f4abb6bd617e66f63eb891498e391763e309"
   dependencies:
@@ -6543,12 +6677,12 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
-watchpack@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.3.1.tgz#7d8693907b28ce6013e7f3610aa2a1acf07dad87"
+watchpack@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"
   dependencies:
     async "^2.1.2"
-    chokidar "^1.4.3"
+    chokidar "^1.7.0"
     graceful-fs "^4.1.2"
 
 wbuf@^1.1.0, wbuf@^1.7.2:
@@ -6629,7 +6763,7 @@ webpack-notifier@^1.3.0:
     object-assign "^4.1.0"
     strip-ansi "^3.0.1"
 
-webpack-sources@^0.1.2:
+webpack-sources@^0.1.2, webpack-sources@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750"
   dependencies:
@@ -6643,16 +6777,16 @@ webpack-sources@^1.0.1:
     source-list-map "^2.0.0"
     source-map "~0.5.3"
 
-webpack@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.0.0.tgz#ee9bcebf21247f7153cb410168cab45e3a59d4d7"
+webpack@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.3.0.tgz#ce2f9e076566aba91f74887133a883fd7da187bc"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"
     ajv "^5.1.5"
     ajv-keywords "^2.0.0"
     async "^2.1.2"
-    enhanced-resolve "^3.0.0"
+    enhanced-resolve "^3.3.0"
     escope "^3.6.0"
     interpret "^1.0.0"
     json-loader "^0.5.4"
@@ -6665,8 +6799,8 @@ webpack@^3.0.0:
     source-map "^0.5.3"
     supports-color "^3.1.0"
     tapable "~0.2.5"
-    uglifyjs-webpack-plugin "^0.4.4"
-    watchpack "^1.3.1"
+    uglifyjs-webpack-plugin "^0.4.6"
+    watchpack "^1.4.0"
     webpack-sources "^1.0.1"
     yargs "^6.0.0"
 
@@ -6735,6 +6869,10 @@ which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
 
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+
 which@1, which@^1.0.5, which@^1.2.9:
   version "1.2.14"
   resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
@@ -6847,6 +6985,12 @@ yargs-parser@^5.0.0:
   dependencies:
     camelcase "^3.0.0"
 
+yargs-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  dependencies:
+    camelcase "^4.1.0"
+
 yargs@^4.8.1:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
@@ -6902,6 +7046,24 @@ yargs@^7.0.0:
     y18n "^3.2.1"
     yargs-parser "^5.0.0"
 
+yargs@^8.0.1:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^7.0.0"
+
 yargs@~3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"