update libs and move to webpack 4

webpack.renderer.js

@@ -5,17 +5,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
 
-const isVendorModule = (module) => {
-    if (!module.context) {
-        return false;
-    }
-    return module.context.indexOf('node_modules') !== -1;
-};
-
 const extractCss = new ExtractTextPlugin({
     filename: '[name].css',
     disable: false,
-    allChunks: true
+    allChunks: true,
 });
 
 const common = {
@@ -24,11 +17,11 @@ const common = {
             {
                 test: /\.ts$/,
                 enforce: 'pre',
-                loader: 'tslint-loader'
+                loader: 'tslint-loader',
             },
             {
                 test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
-                loader: '@ngtools/webpack'
+                loader: '@ngtools/webpack',
             },
             {
                 test: /\.(jpe?g|png|gif|svg)$/i,
@@ -38,39 +31,53 @@ const common = {
                     options: {
                         name: '[name].[ext]',
                         outputPath: 'images/',
-                    }
-                }]
-            }
-        ]
+                    },
+                }],
+            },
+        ],
     },
     plugins: [],
     resolve: {
         extensions: ['.tsx', '.ts', '.js', '.json'],
         alias: {
-            jslib: path.join(__dirname, 'jslib/src')
+            jslib: path.join(__dirname, 'jslib/src'),
         },
         symlinks: false,
-        modules: [path.resolve('node_modules')]
+        modules: [path.resolve('node_modules')],
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'build')
-    }
+        path: path.resolve(__dirname, 'build'),
+    },
 };
 
 const renderer = {
+    mode: 'production',
     target: 'electron-renderer',
     node: {
-        __dirname: false
+        __dirname: false,
     },
     entry: {
-        'app/main': './src/app/main.ts'
+        'app/main': './src/app/main.ts',
+    },
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                commons: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'app/vendor',
+                    chunks: (chunk) => {
+                        return chunk.name === 'app/main';
+                    },
+                },
+            },
+        },
     },
     module: {
         rules: [
             {
                 test: /\.(html)$/,
-                loader: 'html-loader'
+                loader: 'html-loader',
             },
             {
                 test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
@@ -79,9 +86,9 @@ const renderer = {
                     loader: 'file-loader',
                     options: {
                         name: '[name].[ext]',
-                        outputPath: 'fonts/'
-                    }
-                }]
+                        outputPath: 'fonts/',
+                    },
+                }],
             },
             {
                 test: /\.scss$/,
@@ -92,27 +99,27 @@ const renderer = {
                         },
                         {
                             loader: 'sass-loader',
-                        }
+                        },
                     ],
-                    publicPath: '../'
+                    publicPath: '../',
                 })
             },
-        ]
+            // Hide System.import warnings. ref: https://github.com/angular/angular/issues/21560
+            {
+                test: /[\/\\]@angular[\/\\].+\.js$/,
+                parser: { system: true },
+            },
+        ],
     },
     plugins: [
         new AngularCompilerPlugin({
             tsConfigPath: 'tsconfig.json',
             entryModule: 'src/app/app.module#AppModule',
-            sourceMap: true
+            sourceMap: true,
         }),
         // ref: https://github.com/angular/angular/issues/20357
-        new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/,
+        new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)fesm5/,
             path.resolve(__dirname, './src')),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'app/vendor',
-            chunks: ['app/main'],
-            minChunks: isVendorModule
-        }),
         new HtmlWebpackPlugin({
             template: './src/index.html',
             filename: 'index.html',
@@ -123,8 +130,8 @@ const renderer = {
             include: ['app/main.js']
         }),
         new webpack.DefinePlugin({ 'global.GENTLY': false }),
-        extractCss
-    ]
+        extractCss,
+    ],
 };
 
 module.exports = merge(common, renderer);