Upgrade webpack

packages/website/webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin');
 const childProcess = require('child_process');
 
@@ -9,44 +9,7 @@ const GIT_SHA = childProcess
     .toString()
     .trim();
 
-const generatePlugins = () => {
-    let plugins = [];
-    if (process.env.NODE_ENV === 'production') {
-        plugins = plugins.concat([
-            // Since we do not use moment's locale feature, we exclude them from the bundle.
-            // This reduces the bundle size by 0.4MB.
-            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-            new webpack.DefinePlugin({
-                'process.env': {
-                    NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-                    GIT_SHA: JSON.stringify(GIT_SHA),
-                },
-            }),
-            // TODO: Revert to webpack bundled version with webpack v4.
-            // The v3 series bundled version does not support ES6 and
-            // fails to build.
-            new UglifyJsPlugin({
-                sourceMap: true,
-                uglifyOptions: {
-                    mangle: {
-                        reserved: ['BigNumber'],
-                    },
-                },
-            }),
-        ]);
-        if (process.env.DEPLOY_ROLLBAR_SOURCEMAPS === 'true') {
-            plugins = plugins.concat([
-                new RollbarSourceMapPlugin({
-                    accessToken: '32c39bfa4bb6440faedc1612a9c13d28',
-                    version: GIT_SHA,
-                    publicPath: 'https://0xproject.com/',
-                }),
-            ]);
-        }
-    }
-    return plugins;
-};
-module.exports = {
+const config = {
     entry: ['./ts/index.tsx'],
     output: {
         path: path.join(__dirname, '/public'),
@@ -54,7 +17,6 @@ module.exports = {
         chunkFilename: 'bundle-[name].js',
         publicPath: '/',
     },
-    devtool: 'source-map',
     resolve: {
         modules: [path.join(__dirname, '/ts'), 'node_modules'],
         extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.md'],
@@ -92,10 +54,18 @@ module.exports = {
                 test: /\.css$/,
                 loaders: ['style-loader', 'css-loader'],
             },
-            {
-                test: /\.json$/,
-                loader: 'json-loader',
-            },
+        ],
+    },
+    optimization: {
+        minimizer: [
+            new TerserPlugin({
+                sourceMap: true,
+                terserOptions: {
+                    mangle: {
+                        reserved: ['BigNumber'],
+                    },
+                },
+            }),
         ],
     },
     devServer: {
@@ -115,5 +85,40 @@ module.exports = {
         },
         disableHostCheck: true,
     },
-    plugins: generatePlugins(),
+};
+
+module.exports = (_env, argv) => {
+    let plugins = [];
+    if (argv.mode === 'development') {
+        config.devtool = 'source-map';
+        config.mode = 'development';
+    } else {
+        config.mode = 'production';
+        plugins = plugins.concat([
+            // Since we do not use moment's locale feature, we exclude them from the bundle.
+            // This reduces the bundle size by 0.4MB.
+            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+            new webpack.DefinePlugin({
+                'process.env': {
+                    NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+                    GIT_SHA: JSON.stringify(GIT_SHA),
+                },
+            }),
+        ]);
+        if (process.env.DEPLOY_ROLLBAR_SOURCEMAPS === 'true') {
+            plugins = plugins.concat([
+                new RollbarSourceMapPlugin({
+                    accessToken: '32c39bfa4bb6440faedc1612a9c13d28',
+                    version: GIT_SHA,
+                    publicPath: 'https://0xproject.com/',
+                }),
+            ]);
+        }
+    }
+    console.log('i ｢atl｣: Mode: ', config.mode);
+
+    config.plugins = plugins;
+    console.log('i ｢atl｣: Plugin Count: ', config.plugins.length);
+
+    return config;
 };