feat(webpack): migrate to terser from uglifiy

This fixes webpack build in production mode
See @webpack/webpack#7908

Thanks!

Author: peterblazejewicz

README.md

@@ -427,7 +427,7 @@ import * as $ from 'jquery';
 
 ### How can I support IE9 through IE11?
 
-To support IE9 through IE11 open the `polyfills.ts` file in the `polyfills` folder and uncomment out the 'import polyfills' as needed. ALSO - make sure that your `webpack.config` and `webpack.config.vendor` change option of `UglifyJsPlugin` from `ecma: 6` to **`ecma: 5`**.
+To support IE9 through IE11 open the `polyfills.ts` file in the `polyfills` folder and uncomment out the 'import polyfills' as needed. ALSO - make sure that your `webpack.config` and `webpack.config.vendor` change option of `TerserPlugin` from `ecma: 6` to **`ecma: 5`**.
 
 ----
 

package.json

@@ -89,6 +89,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.5",
     "mini-css-extract-plugin": "^0.5.0",
+    "terser-webpack-plugin": "^1.2.1",
     "tslint": "^5.12.0",
     "typescript": "^3.1.3",
     "uglifyjs-webpack-plugin": "^2.1.1",

webpack.config.js

@@ -15,7 +15,7 @@ const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
   .BundleAnalyzerPlugin;
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const { sharedModuleRules } = require('./webpack.additions');
 
@@ -118,19 +118,17 @@ module.exports = env => {
         isDevBuild
           ? []
           : [
-              // we specify a custom UglifyJsPlugin here to get source maps in production
-              new UglifyJsPlugin({
-                cache: true,
-                parallel: true,
-                uglifyOptions: {
-                  compress: false,
+              // we specify a custom TerserPlugin here to get source maps in production
+              new TerserPlugin({
+                sourceMap: true,
+                terserOptions: {
+                  compress: true,
                   ecma: 6,
                   mangle: true,
                   keep_classnames: true,
-                  keep_fnames: true
+                  keep_fnames: true,
                 },
-                sourceMap: true
-              })
+              }),
             ]
       )
     }
@@ -196,18 +194,18 @@ module.exports = env => {
         isDevBuild
           ? []
           : [
-              // we specify a custom UglifyJsPlugin here to get source maps in production
-              new UglifyJsPlugin({
+              // we specify a custom TerserPlugin here to get source maps in production
+              new TerserPlugin({
                 cache: true,
                 parallel: true,
-                uglifyOptions: {
+                sourceMap: true,
+                terserOptions: {
                   compress: false,
                   ecma: 6,
                   mangle: true,
                   keep_classnames: true,
-                  keep_fnames: true
+                  keep_fnames: true,
                 },
-                sourceMap: true
               })
             ]
       )

webpack.config.vendor.js

@@ -2,7 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const merge = require('webpack-merge');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const treeShakableModules = [
   '@angular/animations',
   '@angular/common',
@@ -95,18 +95,18 @@ module.exports = (env) => {
     ]),
     optimization: {
       minimizer: [].concat(isDevBuild ? [] : [
-        // we specify a custom UglifyJsPlugin here to get source maps in production
-        new UglifyJsPlugin({
+        // we specify a custom TerserPlugin here to get source maps in production
+        new TerserPlugin({
           cache: true,
           parallel: true,
-          uglifyOptions: {
+          sourceMap: true,
+          terserOptions: {
             compress: false,
             ecma: 6,
             mangle: true,
             keep_classnames: true,
-            keep_fnames: true
+            keep_fnames: true,
           },
-          sourceMap: true
         })
       ])
     }
@@ -141,18 +141,18 @@ module.exports = (env) => {
     ].concat(isDevBuild ? [] : []),
     optimization: {
       minimizer: [].concat(isDevBuild ? [] : [
-        // we specify a custom UglifyJsPlugin here to get source maps in production
-        new UglifyJsPlugin({
+        // we specify a custom TerserPlugin here to get source maps in production
+        new TerserPlugin({
           cache: true,
           parallel: true,
-          uglifyOptions: {
+          sourceMap: true,
+          terserOptions: {
             compress: false,
             ecma: 6,
             mangle: true,
             keep_classnames: true,
-            keep_fnames: true
+            keep_fnames: true,
           },
-          sourceMap: true
         })
       ])
     }