Update webpack config

client/config/empty.js

@@ -1,4 +1,7 @@
 module.exports = {
+  hmrModule: function (ngmodule) {
+    return ngmodule
+  },
   NgProbeToken: {},
   HmrState: function () {},
   _createConditionalRootRenderer: function (rootRenderer, extraTokens, coreTokens) {

client/config/webpack.common.js

@@ -16,13 +16,14 @@ const ngcWebpack = require('ngc-webpack')
 
 const WebpackNotifierPlugin = require('webpack-notifier')
 
-/*
+const HMR = helpers.hasProcessFlag('hot')
- * Webpack Constants
+const AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot')
- */
 const METADATA = {
   title: 'PeerTube',
   baseUrl: '/',
-  isDevServer: helpers.isWebpackDevServer()
+  isDevServer: helpers.isWebpackDevServer(),
+  HMR: HMR,
+  AOT: AOT
 }
 
 /*
@@ -91,13 +92,6 @@ module.exports = function (options) {
         {
           test: /\.ts$/,
           use: [
-            {
-              loader: '@angularclass/hmr-loader',
-              options: {
-                pretty: !isProd,
-                prod: isProd
-              }
-            },
             {
               loader: 'ng-router-loader',
               options: {
@@ -242,7 +236,7 @@ module.exports = function (options) {
         /**
          * The (\\|\/) piece accounts for path separators in *nix and Windows
          */
-        /angular(\\|\/)core(\\|\/)@angular/,
+        /(.+)?angular(\\|\/)core(.+)?/,
         helpers.root('src'), // location of your src
         {
           /**
@@ -276,7 +270,10 @@ module.exports = function (options) {
       new HtmlWebpackPlugin({
         template: 'src/index.html',
         title: METADATA.title,
-        chunksSortMode: 'dependency',
+        chunksSortMode: function (a, b) {
+          const entryPoints = [ 'inline', 'polyfills', 'sw-register', 'styles', 'vendor', 'main' ]
+          return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0])
+        },
         metadata: METADATA,
         inject: 'body'
       }),

client/config/webpack.dev.js

@@ -11,6 +11,7 @@ const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
 const DefinePlugin = require('webpack/lib/DefinePlugin')
 const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin')
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
+const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin')
 
 /**
  * Webpack Constants
@@ -18,14 +19,18 @@ const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
 const ENV = process.env.ENV = process.env.NODE_ENV = 'development'
 const HOST = process.env.HOST || 'localhost'
 const PORT = process.env.PORT || 3000
+const PUBLIC = process.env.PUBLIC_DEV || HOST + ':' + PORT
+const AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot')
 const HMR = helpers.hasProcessFlag('hot')
-const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
+const METADATA = {
   host: HOST,
   port: PORT,
+  public: PUBLIC,
   ENV: ENV,
   HMR: HMR,
+  AOT: AOT,
   API_URL: 'http://localhost:9000'
-})
+}
 
 const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin
 
@@ -125,11 +130,9 @@ module.exports = function (env) {
           'HMR': METADATA.HMR,
           'API_URL': JSON.stringify(METADATA.API_URL),
           'process.version': JSON.stringify(process.version),
-          'process.env': {
+          'process.env.ENV': JSON.stringify(METADATA.ENV),
-            'ENV': JSON.stringify(METADATA.ENV),
+          'process.env.NODE_ENV': JSON.stringify(METADATA.ENV),
-            'NODE_ENV': JSON.stringify(METADATA.ENV),
+          'process.env.HMR': METADATA.HMR
-            'HMR': METADATA.HMR
-          }
         }),
 
         new DllBundlesPlugin({
@@ -216,8 +219,9 @@ module.exports = function (env) {
             }
 
           }
-        })
+        }),
 
+        new HotModuleReplacementPlugin()
       ],
 
       /**
@@ -232,6 +236,7 @@ module.exports = function (env) {
         port: METADATA.port,
         host: METADATA.host,
         historyApiFallback: true,
+        hot: METADATA.HMR,
         watchOptions: {
           ignored: /node_modules/
         }

client/config/webpack.prod.js

@@ -14,22 +14,24 @@ const DefinePlugin = require('webpack/lib/DefinePlugin')
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
 const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin')
 const OptimizeJsPlugin = require('optimize-js-plugin')
-const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
 const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin')
-
+const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 /**
  * Webpack Constants
  */
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production'
 const HOST = process.env.HOST || 'localhost'
 const PORT = process.env.PORT || 8080
-const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
+const AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot')
+const METADATA = {
   host: HOST,
   port: PORT,
   ENV: ENV,
   HMR: false,
+  AOT: AOT,
   API_URL: ''
-})
+}
 
 module.exports = function (env) {
   return [
@@ -106,6 +108,7 @@ module.exports = function (env) {
        * See: http://webpack.github.io/docs/configuration.html#plugins
        */
       plugins: [
+        new ModuleConcatenationPlugin(),
 
         /**
          * Webpack plugin to optimize a JavaScript file for faster initial load
@@ -142,12 +145,11 @@ module.exports = function (env) {
           'ENV': JSON.stringify(METADATA.ENV),
           'HMR': METADATA.HMR,
           'API_URL': JSON.stringify(METADATA.API_URL),
+          'AOT': METADATA.AOT,
           'process.version': JSON.stringify(process.version),
-          'process.env': {
+          'process.env.ENV': JSON.stringify(METADATA.ENV),
-            'ENV': JSON.stringify(METADATA.ENV),
+          'process.env.NODE_ENV': JSON.stringify(METADATA.ENV),
-            'NODE_ENV': JSON.stringify(METADATA.ENV),
+          'process.env.HMR': METADATA.HMR
-            'HMR': METADATA.HMR
-          }
         }),
 
         /**
@@ -159,44 +161,28 @@ module.exports = function (env) {
         */
         // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
         new UglifyJsPlugin({
-          // beautify: true, //debug
+          parallel: true,
-          // mangle: false, //debug
+          uglifyOptions: {
-          // dead_code: false, //debug
+            ie8: false,
-          // unused: false, //debug
+            ecma: 6,
-          // deadCode: false, //debug
+            warnings: true,
-          // compress: {
+            mangle: true,
-          //   screw_ie8: true,
-          //   keep_fnames: true,
-          //   drop_debugger: false,
-          //   dead_code: false,
-          //   unused: false
-          // }, // debug
-          // comments: true, //debug
-
-          beautify: false, // prod
             output: {
-            comments: false
+              comments: false,
-          }, // prod
+              beautify: false
-          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
             }
+          },
+          warnings: true
         }),
 
+        /**
+         * Plugin: NormalModuleReplacementPlugin
+         * Description: Replace resources that matches resourceRegExp with newResource
+         *
+         * See: http://webpack.github.io/docs/list-of-plugins.html#normalmodulereplacementplugin
+         */
         new NormalModuleReplacementPlugin(
-          /angular2-hmr/,
+          /(angular2|@angularclass)((\\|\/)|-)hmr/,
           helpers.root('config/empty.js')
         ),
 
@@ -208,26 +194,14 @@ module.exports = function (env) {
         new HashedModuleIdsPlugin(),
 
         /**
-        * Plugin: IgnorePlugin
+        * AoT
-        * Description: Don’t generate modules for requests matching the provided RegExp.
-        *
-        * See: http://webpack.github.io/docs/list-of-plugins.html#ignoreplugin
         */
-
+        (AOT ? (
-        // new IgnorePlugin(/angular2-hmr/),
+          new NormalModuleReplacementPlugin(
-
+            /@angular(\\|\/)compiler/,
-        /**
+            helpers.root('config/empty.js')
-        * Plugin: CompressionPlugin
+          )
-        * Description: Prepares compressed versions of assets to serve
+        ) : (new LoaderOptionsPlugin({}))),
-        * 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)

client/package.json

@@ -101,6 +101,7 @@
     "purifycss-webpack": "^0.7.0",
     "standard": "^10.0.0",
     "tslint-config-standard": "^6.0.1",
+    "uglifyjs-webpack-plugin": "^0.4.6",
     "webpack-bundle-analyzer": "^2.8.2",
     "webpack-dev-server": "^2.4.5",
     "webpack-dll-bundles-plugin": "^1.0.0-beta.5"

client/src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { Routes, RouterModule } from '@angular/router'
+import { Routes, RouterModule, PreloadAllModules } from '@angular/router'
 
 const routes: Routes = [
   {
@@ -14,7 +14,12 @@ const routes: Routes = [
 ]
 
 @NgModule({
-  imports: [ RouterModule.forRoot(routes) ],
+  imports: [
+    RouterModule.forRoot(routes, {
+      useHash: Boolean(history.pushState) === false,
+      preloadingStrategy: PreloadAllModules
+    })
+  ],
   exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

client/src/main.browser.ts

@@ -1,13 +1,14 @@
 /* tslint: disable */
 
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
-import { decorateModuleRef } from './app/environment';
+import { decorateModuleRef } from './app/environment'
+import { hmrModule } from '@angularclass/hmr'
 
 /**
  * App Module
  * our top level module that holds all of our components
  */
-import { AppModule } from './app';
+import { AppModule } from './app'
 
 /**
  * Bootstrap our Angular app with a top level NgModule
@@ -16,7 +17,12 @@ export function main(): Promise<any> {
   return platformBrowserDynamic()
     .bootstrapModule(AppModule)
     .then(decorateModuleRef)
-    .catch((err) => console.error(err));
+    .then((ngModuleRef: any) => {
+      // `module` global ref for webpackhmr
+      // Don't run this in Prod
+      return hmrModule(ngModuleRef, module)
+    })
+    .catch((err) => console.error(err))
 }
 
 /**
@@ -25,15 +31,15 @@ export function main(): Promise<any> {
  */
 switch (document.readyState) {
   case 'loading':
-    document.addEventListener('DOMContentLoaded', _domReadyHandler, false);
+    document.addEventListener('DOMContentLoaded', _domReadyHandler, false)
-    break;
+    break
   case 'interactive':
   case 'complete':
   default:
-    main();
+    main()
 }
 
 function _domReadyHandler () {
- document.removeEventListener('DOMContentLoaded', _domReadyHandler, false);
+  document.removeEventListener('DOMContentLoaded', _domReadyHandler, false)
- main();
+  main()
 }

scripts/watch/client.sh

@@ -2,4 +2,4 @@
 
 cd client || exit -1
 
-npm run webpack-dev-server -- --config config/webpack.dev.js --progress --profile --colors --watch --content-base src/ --inline --hot --open
+npm run webpack-dev-server -- --config config/webpack.dev.js --progress --profile --colors --watch --content-base src/ --hotOnly --open