Implement header design

[github/Chocobozzz/PeerTube.git] / client / config / webpack.common.js

diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index 489803f2259963fe00d85c2b3da2c99dacae37ed..acf22dab195f4adc4e78e0e02c6a2d16b9992457 100644 (file)
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -5,24 +5,25 @@ const helpers = require('./helpers')
  */
 
 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 CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
+const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
 const ngcWebpack = require('ngc-webpack')
 
 const WebpackNotifierPlugin = require('webpack-notifier')
 
-/*
- * Webpack Constants
- */
+const HMR = helpers.hasProcessFlag('hot')
+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: {
@@ -152,14 +146,15 @@ module.exports = function (options) {
               loader: 'sass-resources-loader',
               options: {
                 resources: [
-                  helpers.root('src/sass/_variables.scss')
+                  helpers.root('src/sass/_variables.scss'),
+                  helpers.root('src/sass/_mixins.scss')
                 ]
               }
             }
           ]
         },
         { 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' },
+        { test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000' },
 
         /* Raw loader support for *.html
          * Returns file content as string
@@ -223,7 +218,9 @@ module.exports = function (options) {
       new CommonsChunkPlugin({
         name: 'vendor',
         chunks: ['main'],
-        minChunks: module => /node_modules\//.test(module.resource)
+        minChunks: module => {
+          return /node_modules\//.test(module.resource)
+        }
       }),
 
       // Specify the correct order the scripts will be injected in
@@ -242,7 +239,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
         {
           /**
@@ -251,20 +248,6 @@ module.exports = function (options) {
         }
       ),
 
-      /*
-       * 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({
-        sync: [ /polyfill|vendor/ ],
-        defaultAttribute: 'async',
-        preload: [/polyfill|vendor|main/],
-        prefetch: [/chunk/]
-      }),
-
       /*
        * Plugin: HtmlWebpackPlugin
        * Description: Simplifies creation of HTML files to serve your webpack bundles.
@@ -276,11 +259,28 @@ 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'
       }),
 
+      /*
+       * 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({
+        sync: [ /polyfill|vendor/ ],
+        defaultAttribute: 'async',
+        preload: [/polyfill|vendor|main/],
+        prefetch: [/chunk/]
+      }),
+
       new WebpackNotifierPlugin({ alwaysNotify: true }),
 
       /**
@@ -302,29 +302,7 @@ module.exports = function (options) {
         tsConfig: helpers.root('tsconfig.webpack.json')
       }),
 
-      new BundleAnalyzerPlugin({
-        // Can be `server`, `static` or `disabled`.
-        // In `server` mode analyzer will start HTTP server to show bundle report.
-        // In `static` mode single HTML file with bundle report will be generated.
-        // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
-        analyzerMode: 'static',
-        // Path to bundle report file that will be generated in `static` mode.
-        // Relative to bundles output directory.
-        reportFilename: 'report.html',
-        // Automatically open report in default browser
-        openAnalyzer: false,
-        // If `true`, Webpack Stats JSON file will be generated in bundles output directory
-        generateStatsFile: true,
-        // Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
-        // Relative to bundles output directory.
-        statsFilename: 'stats.json',
-        // Options for `stats.toJson()` method.
-        // For example you can exclude sources of your modules from stats file with `source: false` option.
-        // See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
-        statsOptions: null,
-        // Log level. Can be 'info', 'warn', 'error' or 'silent'.
-        logLevel: 'info'
-      })
+      new InlineManifestWebpackPlugin()
     ],
 
     /*