Merge pull request #167 from wednesday-solutions/feat/upgrade-webpack

Feat/upgrade webpack

Author: alichherawalla

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.14.x]
 
     steps:
       - uses: actions/checkout@v2

app/app.js

@@ -16,7 +16,7 @@ import history from 'utils/history';
 import 'sanitize.css/sanitize.css';
 
 // Import root app
-import App from 'containers/App';
+import App from 'containers/App/Loadable';
 
 // Import Language Provider
 import LanguageProvider from 'containers/LanguageProvider';

app/containers/App/Loadable.js

@@ -0,0 +1,9 @@
+/**
+ *
+ * Asynchronously loads the component for App
+ *
+ */
+
+import loadable from 'utils/loadable';
+
+export default loadable(() => import('./index'));

app/i18n.js

@@ -8,8 +8,6 @@
  *   You CANNOT use import/export in this file.
  */
 //eslint-disable-line
-import '@formatjs/intl-relativetimeformat/polyfill';
-import '@formatjs/intl-relativetimeformat/locale-data/en';
 
 const enTranslationMessages = require('./translations/en.json');
 

app/themes/fonts.js

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { media } from '@app/themes';
+import media from '@app/themes/media';
 
 // sizes
 

app/themes/styles.js

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { colors } from '@app/themes';
+import colors from '@app/themes/colors';
 
 export const configureFlex = (
   direction = 'row',

internals/webpack/webpack.config.dev.js

@@ -13,7 +13,6 @@ module.exports = require('./webpack.config.base')({
 
   // Add hot reloading in development
   entry: [
-    require.resolve('react-app-polyfill/ie11'),
     'webpack-hot-middleware/client?reload=true',
     path.join(process.cwd(), 'app/app.js') // Start with js/app.js
   ],

internals/webpack/webpack.config.prod.js

@@ -3,16 +3,17 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackPwaManifest = require('webpack-pwa-manifest');
 const OfflinePlugin = require('@lcdp/offline-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
 const { isProd, isUAT, getBasePublicPath } = require('../utils');
 
 const publicPath = getBasePublicPath();
 
 module.exports = require('./webpack.config.base')({
   mode: 'production',
   // In production, we skip all hot-reloading stuff
-  entry: [require.resolve('react-app-polyfill/ie11'), path.join(process.cwd(), 'app/app.js')],
+  entry: [path.join(process.cwd(), 'app/app.js')],
 
   // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
   output: {
@@ -22,23 +23,6 @@ module.exports = require('./webpack.config.base')({
 
   optimization: {
     minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          warnings: false,
-          compress: {
-            comparisons: false
-          },
-          parse: {},
-          mangle: true,
-          output: {
-            comments: false,
-            ascii_only: true
-          }
-        },
-        parallel: true
-      })
-    ],
     nodeEnv: 'production',
     sideEffects: false,
     concatenateModules: true,
@@ -133,6 +117,10 @@ module.exports = require('./webpack.config.base')({
           ios: true
         }
       ]
+    }),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      generateStatsFile: true
     })
   ],
   devtool: 'source-map',

jest.config.json

@@ -45,7 +45,6 @@
     ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/image.js"
   },
   "setupFilesAfterEnv": ["<rootDir>/jest.setup.js", "<rootDir>/internals/testing/test-bundler.js"],
-  "setupFiles": ["raf/polyfill"],
   "testRegex": "tests/.*\\.test\\.js$",
   "snapshotSerializers": []
 }

package.json

@@ -84,7 +84,6 @@
   },
   "pre-commit": "lint:staged",
   "dependencies": {
-    "@formatjs/intl-relativetimeformat": "^9.1.6",
     "antd": "^5.1.2",
     "apisauce": "2.1.1",
     "chalk": "4.1.1",
@@ -95,18 +94,18 @@
     "express": "4.16.4",
     "history": "4.9.x",
     "immer": "9.0.3",
-    "immutable": "^3.8.1",
+    "immutable": "^4.2.1",
     "intl": "1.2.5",
     "invariant": "2.2.4",
     "ip": "1.1.5",
     "less": "^4.1.1",
     "less-loader": "7.3.0",
-    "lodash": "4.17.19",
+    "lodash-es": "4.17.21",
     "minimist": "1.2.3",
     "prop-types": "15.7.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-intl": "5.20.3",
+    "react-intl": "6.2.5",
     "react-redux": "7.0.2",
     "react-router-dom": "^5.1.2",
     "redux": "4.0.1",
@@ -144,28 +143,27 @@
     "@storybook/react": "^5.2.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
-    "add-asset-html-webpack-plugin": "3.2.0",
+    "add-asset-html-webpack-plugin": "^5.0.2",
     "axios-mock-adapter": "^1.17.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "babel-plugin-import": "^1.13.3",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-react-intl": "3.0.1",
     "babel-plugin-styled-components": "1.10.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "cheerio": "^1.0.0-rc.10",
     "circular-dependency-plugin": "5.2.2",
     "compare-versions": "3.4.0",
-    "compression-webpack-plugin": "8.0.0",
+    "compression-webpack-plugin": "^10.0.0",
     "coveralls": "3.0.3",
     "css-loader": "^5.2.6",
     "eslint": "5.16.0",
     "eslint-config-prettier": "6.4.0",
     "eslint-config-prettier-standard": "^3.0.1",
     "eslint-config-standard": "14.1.0",
-    "eslint-import-resolver-webpack": "0.11.1",
+    "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-import": "2.18.2",
     "eslint-plugin-jest": "^23.2.0",
     "eslint-plugin-jsx-a11y": "6.2.1",
@@ -180,8 +178,8 @@
     "file-loader": "6.2.0",
     "gh-pages": "^3.2.3",
     "html-loader": "2.1.2",
-    "html-webpack-plugin": "5.3.2",
-    "image-webpack-loader": "7.0.1",
+    "html-webpack-plugin": "^5.5.0",
+    "image-webpack-loader": "^8.1.0",
     "imports-loader": "3.0.0",
     "jest-cli": "27.0.5",
     "jest-coverage-badges": "^1.1.2",
@@ -197,7 +195,6 @@
     "prettier": "2.3.1",
     "prettier-config-standard": "4.0.0",
     "prettier-standard": "16.4.1",
-    "react-app-polyfill": "2.0.0",
     "react-floki": "^1.0.70",
     "rimraf": "2.6.3",
     "shelljs": "0.8.3",
@@ -210,14 +207,14 @@
     "stylelint-config-styled-components": "0.1.1",
     "stylelint-processor-styled-components": "1.6.0",
     "svg-url-loader": "7.1.1",
-    "terser-webpack-plugin": "5.1.3",
+    "terser-webpack-plugin": "^5.3.6",
     "url-loader": "4.1.1",
-    "webpack": "^5.40.0",
+    "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "4.7.2",
-    "webpack-dev-middleware": "5.0.0",
-    "webpack-hot-middleware": "2.25.0",
-    "webpack-pwa-manifest": "4.3.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-middleware": "^6.0.1",
+    "webpack-hot-middleware": "^2.25.3",
+    "webpack-pwa-manifest": "^4.3.0",
     "whatwg-fetch": "3.0.0"
   },
   "sideEffects": false