Update to webpack

Author: alphatrl

.env.example

@@ -0,0 +1 @@
+SERVER_URL=

.gitignore

@@ -11,14 +11,13 @@
 
 # production
 /build
-/dist
+/dist/*
+!dist/_redirects
+
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

.prettierrc.js .prettierrc

@@ -1,6 +1,6 @@
-module.exports = {
+{
   semi: true,
   trailingComma: 'es5',
   singleQuote: true,
   tabWidth: 2,
-};
+}

custom.d.ts

@@ -0,0 +1,7 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*jpg';
+declare module '*png';

public/_redirects dist/_redirects

@@ -1,51 +1,63 @@
 {
   "name": "smu-shortcut",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "private": true,
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^3.4.0",
-    "@typescript-eslint/parser": "^3.4.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "prettier": "^2.0.5",
-    "ts-node": "^8.10.2"
+  "main": "index.tsx",
+  "scripts": {
+    "start": "webpack-dev-server --open --mode development",
+    "test": "echo \"Error: No Test specified\" && exit 1",
+    "build": "webpack --mode production",
+    "clean": "rm -Rf dist/*"
   },
-  "dependencies": {
+  "devDependencies": {
+    "@babel/preset-react": "^7.10.4",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/dotenv-webpack": "^1.8.0",
+    "@types/file-loader": "^4.2.0",
     "@types/jest": "^26.0.4",
+    "@types/lodash": "^4.14.159",
     "@types/node": "^14.0.18",
     "@types/react": "^16.9.41",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.5",
-    "node-sass": "^4.14.1",
-    "normalize.css": "^8.0.0",
+    "@types/webpack-dev-server": "^3.11.0",
+    "@typescript-eslint/eslint-plugin": "^3.4.0",
+    "@typescript-eslint/parser": "^3.4.0",
+    "babel-core": "^6.26.3",
+    "babel-preset-env": "^1.7.0",
+    "css-loader": "^4.2.1",
+    "dotenv-webpack": "^2.0.0",
+    "eslint": "^7.6.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "file-loader": "^6.0.0",
+    "fork-ts-checker-webpack-plugin": "^5.0.14",
+    "html-webpack-plugin": "^4.3.0",
+    "postcss-modules": "^1.3.2",
+    "prettier": "^2.0.5",
+    "sass-loader": "^9.0.3",
+    "style-loader": "^1.2.1",
+    "svg-url-loader": "^6.0.0",
+    "ts-loader": "^8.0.2",
+    "ts-node": "^8.10.2",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-pwa-manifest": "^4.2.0"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "lodash": "^4.17.19",
+    "prop-types": "^15.6.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^3.4.1",
+    "sass": "^1.26.10",
     "typescript": "^3.9.6"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }

package.json

@@ -20,6 +20,10 @@
   padding: 16px;
 }
 
+.padding {
+  padding: 32px;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',