refactor(web-ts-results): webpack config

Author: nakrovati

webdriver-ts-results/package-lock.json

@@ -2,6 +2,7 @@
   "name": "webdriver-ts-results",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "jstat": "^1.9.6",
     "plotly.js-cartesian-dist": "2.18.2",
@@ -16,7 +17,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint './src/**/*.{ts,tsx}'",
-    "build-prod": "rimraf --glob dist && cross-env NODE_ENV=\"production\" webpack --env prod -c webpack.config.js && rimraf --glob table.html && rimraf --glob \"BoxPlotTable*.js\" && cpx dist/table.html . && cpx \"dist/BoxPlotTable*.js\" . && cpx \"dist/plotly*.js\" ."
+    "build-prod": "rimraf --glob dist && cross-env NODE_ENV=\"production\" webpack --env prod && rimraf --glob table.html && rimraf --glob \"BoxPlotTable*.js\" && cpx dist/table.html . && cpx \"dist/BoxPlotTable*.js\" . && cpx \"dist/plotly*.js\" ."
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -49,6 +50,7 @@
     "rimraf": "^4.3.1",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.5",
+    "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^5.0.1"
   }

webdriver-ts-results/package.json

@@ -1,28 +1,21 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES5",
     "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
     ],
     "noFallthroughCasesInSwitch": true,
-    "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "typeRoots": [
-      "./node_modules/@types",
-      "./src/typings"
-    ]
   },
   "include": [
     "src"

webdriver-ts-results/tsconfig.json

@@ -1,25 +1,7 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": false,
-    "jsx": "react"
-  },
-  "include": [
-    "src"
-  ]
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "noEmit": false,
+        "jsx": "react"
+    }
 }

webdriver-ts-results/tsconfig.prod.json

@@ -1,12 +1,14 @@
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-var InlineChunkHtmlPlugin = require('inline-chunk-html-plugin');
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+// const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
+import InlineChunkHtmlPlugin from 'inline-chunk-html-plugin';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-var path = require('path')
-var cache = true;
-var loaders = [
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const loaders = [
 	{
-		test: /\.tsx$|\.ts$/,
+		test: /\.tsx?$/,
 		loader: 'ts-loader',
 		exclude: /node_modules/,
     options: {
@@ -18,11 +20,9 @@ var loaders = [
     use: [{ loader: "style-loader" }, { loader: "css-loader" }],
 	}
 ];
-var extensions = [
-	'.ts', '.tsx', '.ts', '.js'
-];
 
-module.exports = [{
+/** @type {import("webpack").Configuration} */
+export default [{
 	cache: true,
 	module: {
 		rules: loaders
@@ -53,7 +53,7 @@ module.exports = [{
     }
   },
 	resolve: {
-		extensions: extensions,
+		extensions: [".js", ".ts", ".tsx"],
 		modules: [
 			__dirname,
 			path.resolve(__dirname, "src"),