Merge pull request #1115 from 0xProject/upgradeWebpack

Upgrade Webpack

5 files changed, 79 insertions, 77 deletions

diff --git a/packages/website/README.md b/packages/website/README.md
index 7115a3b5c..2edc17cd9 100644
--- a/packages/website/README.md
+++ b/packages/website/README.md
@@ -14,7 +14,7 @@ Please read our [contribution guidelines](../../CONTRIBUTING.md) before getting
 
 ## Local Dev Setup
 
-Requires Node version 6.9.5 or higher.
+Requires Node version 6.9.5 or higher
 
 Add the following to your `/etc/hosts` file:
 
diff --git a/packages/website/package.json b/packages/website/package.json
index 8c115d8a0..3cf243645 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -7,11 +7,11 @@
     "private": true,
     "description": "Website and 0x portal dapp",
     "scripts": {
-        "build": "NODE_ENV=production node --max_old_space_size=8192 ../../node_modules/.bin/webpack",
-        "build:ci": "yarn build",
+        "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production",
+        "build:dev": "../../node_modules/.bin/webpack --mode development",
         "clean": "shx rm -f public/bundle*",
         "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
-        "watch_without_deps": "webpack-dev-server --content-base public --https",
+        "dev": "webpack-dev-server --mode development --content-base public --https",
         "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
         "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
         "deploy_live": "DEPLOY_ROLLBAR_SOURCEMAPS=true npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js"
@@ -87,26 +87,23 @@
         "@types/react-tap-event-plugin": "0.0.30",
         "@types/redux": "^3.6.0",
         "@types/web3-provider-engine": "^14.0.0",
-        "awesome-typescript-loader": "^3.1.3",
-        "copy-webpack-plugin": "^4.0.1",
+        "awesome-typescript-loader": "^5.2.1",
         "copyfiles": "^2.0.0",
         "css-loader": "0.23.x",
-        "exports-loader": "0.6.x",
-        "imports-loader": "0.6.x",
-        "json-loader": "^0.5.4",
-        "less-loader": "^2.2.3",
+        "less-loader": "^4.1.0",
         "make-promises-safe": "^1.1.0",
         "raw-loader": "^0.5.1",
-        "rollbar-sourcemap-webpack-plugin": "^2.3.0",
+        "rollbar-sourcemap-webpack-plugin": "^2.4.0",
         "shx": "^0.2.2",
-        "source-map-loader": "^0.1.6",
-        "style-loader": "0.13.x",
+        "source-map-loader": "^0.2.4",
+        "style-loader": "0.23.x",
+        "terser-webpack-plugin": "^1.1.0",
         "tslint": "5.11.0",
         "tslint-config-0xproject": "^0.0.2",
         "typescript": "3.0.1",
-        "uglifyjs-webpack-plugin": "^1.2.5",
-        "webpack": "^3.1.0",
-        "webpack-dev-middleware": "^1.10.0",
-        "webpack-dev-server": "^2.5.0"
+        "uglifyjs-webpack-plugin": "^2.0.1",
+        "webpack": "^4.20.2",
+        "webpack-cli": "3.1.2",
+        "webpack-dev-server": "^3.1.9"
     }
 }
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 9e59b00ac..d4a79cc4f 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -26,47 +26,47 @@ import 'less/all.less';
 
 // We pass modulePromise returning lambda instead of module promise,
 // cause we only want to import the module when the user navigates to the page.
-// At the same time webpack statically parses for System.import() to determine bundle chunk split points
-// so each lazy import needs it's own `System.import()` declaration.
+// At the same time webpack statically parses for import() to determine bundle chunk split points
+// so each lazy import needs it's own `import()` declaration.
 
 const LazyPortal = createLazyComponent('Portal', async () =>
-    System.import<any>(/* webpackChunkName: "portal" */ 'ts/containers/portal'),
+    import(/* webpackChunkName: "portal" */ 'ts/containers/portal'),
 );
 const LazyZeroExJSDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'),
+    import(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'),
 );
 const LazyContractWrappersDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "contractWrapperDocs" */ 'ts/containers/contract_wrappers_documentation'),
+    import(/* webpackChunkName: "contractWrapperDocs" */ 'ts/containers/contract_wrappers_documentation'),
 );
 const LazyOrderWatcherDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "orderWatcherDocs" */ 'ts/containers/order_watcher_documentation'),
+    import(/* webpackChunkName: "orderWatcherDocs" */ 'ts/containers/order_watcher_documentation'),
 );
 const LazySmartContractsDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "smartContractDocs" */ 'ts/containers/smart_contracts_documentation'),
+    import(/* webpackChunkName: "smartContractDocs" */ 'ts/containers/smart_contracts_documentation'),
 );
 const LazyConnectDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'),
+    import(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'),
 );
 const LazyWeb3WrapperDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "web3WrapperDocs" */ 'ts/containers/web3_wrapper_documentation'),
+    import(/* webpackChunkName: "web3WrapperDocs" */ 'ts/containers/web3_wrapper_documentation'),
 );
 const LazySolCompilerDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "solCompilerDocs" */ 'ts/containers/sol_compiler_documentation'),
+    import(/* webpackChunkName: "solCompilerDocs" */ 'ts/containers/sol_compiler_documentation'),
 );
 const LazyJSONSchemasDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "jsonSchemasDocs" */ 'ts/containers/json_schemas_documentation'),
+    import(/* webpackChunkName: "jsonSchemasDocs" */ 'ts/containers/json_schemas_documentation'),
 );
 const LazySolCovDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "solCovDocs" */ 'ts/containers/sol_cov_documentation'),
+    import(/* webpackChunkName: "solCovDocs" */ 'ts/containers/sol_cov_documentation'),
 );
 const LazySubprovidersDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "subproviderDocs" */ 'ts/containers/subproviders_documentation'),
+    import(/* webpackChunkName: "subproviderDocs" */ 'ts/containers/subproviders_documentation'),
 );
 const LazyOrderUtilsDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "orderUtilsDocs" */ 'ts/containers/order_utils_documentation'),
+    import(/* webpackChunkName: "orderUtilsDocs" */ 'ts/containers/order_utils_documentation'),
 );
 const LazyEthereumTypesDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "ethereumTypesDocs" */ 'ts/containers/ethereum_types_documentation'),
+    import(/* webpackChunkName: "ethereumTypesDocs" */ 'ts/containers/ethereum_types_documentation'),
 );
 
 const DOCUMENT_TITLE = '0x: The Protocol for Trading Tokens';
diff --git a/packages/website/ts/lazy_component.tsx b/packages/website/ts/lazy_component.tsx
index dce06ed8d..9d3b9944a 100644
--- a/packages/website/ts/lazy_component.tsx
+++ b/packages/website/ts/lazy_component.tsx
@@ -49,7 +49,7 @@ export class LazyComponent extends React.Component<LazyComponentProps, LazyCompo
  * @param  componentName    name of exported component
  * @param  lazyImport       lambda returning module promise
  *                          we pass a lambda because we only want to require a module if it's used
- * @example `const LazyPortal = createLazyComponent('Portal', () => System.import<any>('ts/containers/portal'));``
+ * @example `const LazyPortal = createLazyComponent('Portal', () => import<any>('ts/containers/portal'));``
  */
 export const createLazyComponent = (componentName: string, lazyImport: () => Promise<any>) => {
     return (props: any) => {
diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js
index 8653196a6..ec265be93 100644
--- a/packages/website/webpack.config.js
+++ b/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'),
@@ -92,10 +55,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 +86,39 @@ module.exports = {
         },
         disableHostCheck: true,
     },
-    plugins: generatePlugins(),
+};
+
+module.exports = (_env, argv) => {
+    let plugins = [];
+    if (argv.mode === 'development') {
+        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;
 };