From c613b6741d7eff069c93ef1a800b67ddfb618c51 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 4 Oct 2018 15:47:43 +0100 Subject: Upgrade webpack --- packages/0x.js/package.json | 7 ++- packages/0x.js/webpack.config.js | 31 +++++------ packages/contract-wrappers/package.json | 1 - packages/order-watcher/package.json | 2 - packages/subproviders/package.json | 2 +- packages/testnet-faucets/package.json | 6 +-- packages/website/package.json | 28 +++++----- packages/website/ts/index.tsx | 30 +++++------ packages/website/ts/lazy_component.tsx | 2 +- packages/website/webpack.config.js | 95 +++++++++++++++++---------------- 10 files changed, 99 insertions(+), 105 deletions(-) (limited to 'packages') diff --git a/packages/0x.js/package.json b/packages/0x.js/package.json index c89a3e613..268972a4f 100644 --- a/packages/0x.js/package.json +++ b/packages/0x.js/package.json @@ -52,13 +52,12 @@ "@types/node": "*", "@types/sinon": "^2.2.2", "@types/web3-provider-engine": "^14.0.0", - "awesome-typescript-loader": "^3.1.3", + "awesome-typescript-loader": "^5.2.1", "chai": "^4.0.1", "chai-as-promised": "^7.1.0", "chai-bignumber": "^2.0.1", "copyfiles": "^2.0.0", "dirty-chai": "^2.0.1", - "json-loader": "^0.5.4", "make-promises-safe": "^1.1.0", "mocha": "^4.1.0", "npm-run-all": "^4.1.2", @@ -70,8 +69,8 @@ "tslint": "5.11.0", "typedoc": "0.12.0", "typescript": "3.0.1", - "uglifyjs-webpack-plugin": "^1.3.0", - "webpack": "^3.1.0" + "uglifyjs-webpack-plugin": "^2.0.1", + "webpack": "^4.20.2" }, "dependencies": { "@0xproject/assert": "^1.0.12", diff --git a/packages/0x.js/webpack.config.js b/packages/0x.js/webpack.config.js index 1ad0a79ec..397faa76f 100644 --- a/packages/0x.js/webpack.config.js +++ b/packages/0x.js/webpack.config.js @@ -2,8 +2,7 @@ * This is to generate the umd bundle only */ const _ = require('lodash'); -const webpack = require('webpack'); -const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); +const TerserPlugin = require('terser-webpack-plugin'); const path = require('path'); const production = process.env.NODE_ENV === 'production'; @@ -16,6 +15,7 @@ if (production) { module.exports = { entry, + mode: 'production', output: { path: path.resolve(__dirname, '_bundles'), filename: '[name].js', @@ -27,19 +27,18 @@ module.exports = { extensions: ['.ts', '.js', '.json'], }, devtool: 'source-map', - plugins: [ - // 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'], + optimization: { + minimizer: [ + new TerserPlugin({ + sourceMap: true, + terserOptions: { + mangle: { + reserved: ['BigNumber'], + }, }, - }, - }), - ], + }), + ], + }, module: { rules: [ { @@ -59,10 +58,6 @@ module.exports = { ], exclude: /node_modules/, }, - { - test: /\.json$/, - loader: 'json-loader', - }, ], }, }; diff --git a/packages/contract-wrappers/package.json b/packages/contract-wrappers/package.json index 22dd6521c..c345d0a6a 100644 --- a/packages/contract-wrappers/package.json +++ b/packages/contract-wrappers/package.json @@ -53,7 +53,6 @@ "@types/sinon": "^2.2.2", "@types/uuid": "^3.4.2", "@types/web3-provider-engine": "^14.0.0", - "awesome-typescript-loader": "^3.1.3", "chai": "^4.0.1", "chai-as-promised": "^7.1.0", "chai-bignumber": "^2.0.1", diff --git a/packages/order-watcher/package.json b/packages/order-watcher/package.json index 9f57dd6fd..de5f7ba09 100644 --- a/packages/order-watcher/package.json +++ b/packages/order-watcher/package.json @@ -52,13 +52,11 @@ "@types/mocha": "^2.2.42", "@types/node": "*", "@types/sinon": "^2.2.2", - "awesome-typescript-loader": "^3.1.3", "chai": "^4.0.1", "chai-as-promised": "^7.1.0", "chai-bignumber": "^2.0.1", "copyfiles": "^2.0.0", "dirty-chai": "^2.0.1", - "json-loader": "^0.5.4", "make-promises-safe": "^1.1.0", "mocha": "^4.1.0", "npm-run-all": "^4.1.2", diff --git a/packages/subproviders/package.json b/packages/subproviders/package.json index f9063228f..491f079d2 100644 --- a/packages/subproviders/package.json +++ b/packages/subproviders/package.json @@ -76,7 +76,7 @@ "tslint": "5.11.0", "typedoc": "0.12.0", "typescript": "3.0.1", - "webpack": "^3.1.0" + "webpack": "^4.20.2" }, "optionalDependencies": { "@ledgerhq/hw-transport-node-hid": "^4.3.0" diff --git a/packages/testnet-faucets/package.json b/packages/testnet-faucets/package.json index 33f557538..8213f896f 100644 --- a/packages/testnet-faucets/package.json +++ b/packages/testnet-faucets/package.json @@ -36,15 +36,15 @@ "@types/body-parser": "^1.16.1", "@types/express": "^4.0.35", "@types/lodash": "4.14.104", - "awesome-typescript-loader": "^3.1.3", + "awesome-typescript-loader": "^5.2.1", "gulp": "^3.9.1", "make-promises-safe": "^1.1.0", "nodemon": "^1.11.0", "shx": "^0.2.2", - "source-map-loader": "^0.1.6", + "source-map-loader": "^0.2.4", "tslint": "5.11.0", "typescript": "3.0.1", - "webpack": "^3.1.0", + "webpack": "^4.20.2", "webpack-node-externals": "^1.6.0" } } diff --git a/packages/website/package.json b/packages/website/package.json index 8c115d8a0..530f71677 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -7,11 +7,12 @@ "private": true, "description": "Website and 0x portal dapp", "scripts": { - "build": "NODE_ENV=production node --max_old_space_size=8192 ../../node_modules/.bin/webpack", + "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production", + "build:dev": "../../node_modules/.bin/webpack --mode development", "build:ci": "yarn build", "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 +88,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(/* webpackChunkName: "portal" */ 'ts/containers/portal'), + import(/* webpackChunkName: "portal" */ 'ts/containers/portal'), ); const LazyZeroExJSDocumentation = createLazyComponent('Documentation', async () => - System.import(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'), + import(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'), ); const LazyContractWrappersDocumentation = createLazyComponent('Documentation', async () => - System.import(/* webpackChunkName: "contractWrapperDocs" */ 'ts/containers/contract_wrappers_documentation'), + import(/* webpackChunkName: "contractWrapperDocs" */ 'ts/containers/contract_wrappers_documentation'), ); const LazyOrderWatcherDocumentation = createLazyComponent('Documentation', async () => - System.import(/* webpackChunkName: "orderWatcherDocs" */ 'ts/containers/order_watcher_documentation'), + import(/* webpackChunkName: "orderWatcherDocs" */ 'ts/containers/order_watcher_documentation'), ); const LazySmartContractsDocumentation = createLazyComponent('Documentation', async () => - System.import(/* webpackChunkName: "smartContractDocs" */ 'ts/containers/smart_contracts_documentation'), + import(/* webpackChunkName: "smartContractDocs" */ 'ts/containers/smart_contracts_documentation'), ); const LazyConnectDocumentation = createLazyComponent('Documentation', async () => - System.import(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'), + import(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'), ); const LazyWeb3WrapperDocumentation = createLazyComponent('Documentation', async () => - System.import(/* webpackChunkName: "web3WrapperDocs" */ 'ts/containers/web3_wrapper_documentation'), + import(/* webpackChunkName: "web3WrapperDocs" */ 'ts/containers/web3_wrapper_documentation'), ); const LazySolCompilerDocumentation = createLazyComponent('Documentation', async () => - System.import(/* webpackChunkName: "solCompilerDocs" */ 'ts/containers/sol_compiler_documentation'), + import(/* webpackChunkName: "solCompilerDocs" */ 'ts/containers/sol_compiler_documentation'), ); const LazyJSONSchemasDocumentation = createLazyComponent('Documentation', async () => - System.import(/* webpackChunkName: "jsonSchemasDocs" */ 'ts/containers/json_schemas_documentation'), + import(/* webpackChunkName: "jsonSchemasDocs" */ 'ts/containers/json_schemas_documentation'), ); const LazySolCovDocumentation = createLazyComponent('Documentation', async () => - System.import(/* webpackChunkName: "solCovDocs" */ 'ts/containers/sol_cov_documentation'), + import(/* webpackChunkName: "solCovDocs" */ 'ts/containers/sol_cov_documentation'), ); const LazySubprovidersDocumentation = createLazyComponent('Documentation', async () => - System.import(/* webpackChunkName: "subproviderDocs" */ 'ts/containers/subproviders_documentation'), + import(/* webpackChunkName: "subproviderDocs" */ 'ts/containers/subproviders_documentation'), ); const LazyOrderUtilsDocumentation = createLazyComponent('Documentation', async () => - System.import(/* webpackChunkName: "orderUtilsDocs" */ 'ts/containers/order_utils_documentation'), + import(/* webpackChunkName: "orderUtilsDocs" */ 'ts/containers/order_utils_documentation'), ); const LazyEthereumTypesDocumentation = createLazyComponent('Documentation', async () => - System.import(/* 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 System.import('ts/containers/portal'));`` + * @example `const LazyPortal = createLazyComponent('Portal', () => import('ts/containers/portal'));`` */ export const createLazyComponent = (componentName: string, lazyImport: () => Promise) => { return (props: any) => { diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js index 8653196a6..1b213b339 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'), @@ -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; }; -- cgit v1.2.3