add happypack plugin for webpack

.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["es2015"],
-  "plugins": ["transform-runtime"]
-}

.eslintrc.js

@@ -13,9 +13,10 @@ module.exports = {
     project: './tsconfig.json'
   },
   rules: {
-    "@typescript-eslint/no-unsafe-assignment": "off",
     "@typescript-eslint/no-explicit-any": "off",
-    "no-console": "off"
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-unsafe-call": "off",
+    "no-console": "off",
   },
   env: {
     browser: true,

package.json

@@ -2,142 +2,29 @@
   "name": "excel-course",
   "version": "1.0.0",
   "main": "index.js",
-  "dependencies": {
-    "acorn": "^8.7.1",
-    "acorn-import-assertions": "^1.8.0",
-    "acorn-walk": "^8.2.0",
-    "ajv": "^6.12.6",
-    "ajv-keywords": "^3.5.2",
-    "arg": "^4.1.3",
-    "browserslist": "^4.20.3",
-    "buffer-from": "^1.1.2",
-    "caniuse-lite": "^1.0.30001346",
-    "chrome-trace-event": "^1.0.3",
-    "clone-deep": "^4.0.1",
-    "colorette": "^2.0.17",
-    "commander": "^2.20.3",
-    "core-js": "^3.22.8",
-    "create-require": "^1.1.1",
-    "cross-spawn": "^7.0.3",
-    "diff": "^4.0.2",
-    "electron-to-chromium": "^1.4.146",
-    "enhanced-resolve": "^5.9.3",
-    "envinfo": "^7.8.1",
-    "es-module-lexer": "^0.9.3",
-    "escalade": "^3.1.1",
-    "eslint-scope": "^5.1.1",
-    "esrecurse": "^4.3.0",
-    "estraverse": "^4.3.0",
-    "events": "^3.3.0",
-    "execa": "^5.1.1",
-    "fast-deep-equal": "^3.1.3",
-    "fast-json-stable-stringify": "^2.1.0",
-    "fastest-levenshtein": "^1.0.12",
-    "find-up": "^4.1.0",
-    "function-bind": "^1.1.1",
-    "get-stream": "^6.0.1",
-    "glob-to-regexp": "^0.4.1",
-    "graceful-fs": "^4.2.10",
-    "has": "^1.0.3",
-    "has-flag": "^4.0.0",
-    "human-signals": "^2.1.0",
-    "import-local": "^3.1.0",
-    "interpret": "^2.2.0",
-    "is-core-module": "^2.9.0",
-    "is-plain-object": "^2.0.4",
-    "is-stream": "^2.0.1",
-    "isexe": "^2.0.0",
-    "isobject": "^3.0.1",
-    "jest-worker": "^27.5.1",
-    "json-parse-even-better-errors": "^2.3.1",
-    "json-schema-traverse": "^0.4.1",
-    "json5": "^2.2.1",
-    "kind-of": "^6.0.3",
-    "loader-runner": "^4.3.0",
-    "locate-path": "^5.0.0",
-    "make-error": "^1.3.6",
-    "merge-stream": "^2.0.0",
-    "mime-db": "^1.52.0",
-    "mime-types": "^2.1.35",
-    "mimic-fn": "^2.1.0",
-    "minimist": "^1.2.6",
-    "neo-async": "^2.6.2",
-    "node-releases": "^2.0.5",
-    "npm-run-path": "^4.0.1",
-    "onetime": "^5.1.2",
-    "p-limit": "^2.3.0",
-    "p-locate": "^4.1.0",
-    "p-try": "^2.2.0",
-    "path-exists": "^4.0.0",
-    "path-key": "^3.1.1",
-    "path-parse": "^1.0.7",
-    "picocolors": "^1.0.0",
-    "pkg-dir": "^4.2.0",
-    "punycode": "^2.1.1",
-    "randombytes": "^2.1.0",
-    "rechoir": "^0.7.1",
-    "resolve": "^1.22.0",
-    "resolve-cwd": "^3.0.0",
-    "resolve-from": "^5.0.0",
-    "safe-buffer": "^5.2.1",
-    "schema-utils": "^3.1.1",
-    "serialize-javascript": "^6.0.0",
-    "shallow-clone": "^3.0.1",
-    "shebang-command": "^2.0.0",
-    "shebang-regex": "^3.0.0",
-    "signal-exit": "^3.0.7",
-    "source-map": "^0.6.1",
-    "source-map-support": "^0.5.21",
-    "strip-bom": "^3.0.0",
-    "strip-final-newline": "^2.0.0",
-    "supports-color": "^8.1.1",
-    "supports-preserve-symlinks-flag": "^1.0.0",
-    "tapable": "^2.2.1",
-    "terser": "^5.14.0",
-    "terser-webpack-plugin": "^5.3.3",
-    "uri-js": "^4.4.1",
-    "v8-compile-cache-lib": "^3.0.1",
-    "watchpack": "^2.4.0",
-    "webpack-merge": "^5.8.0",
-    "webpack-sources": "^3.2.3",
-    "which": "^2.0.2",
-    "wildcard": "^2.0.0",
-    "yn": "^3.1.1"
-  },
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
+    "@types/happypack": "^5.0.2",
-    "@babel/core": "^7.18.2",
-    "@babel/eslint-parser": "^7.18.2",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-typescript": "^7.17.12",
     "@types/html-webpack-plugin": "^3.2.6",
     "@types/node": "^17.0.40",
     "@types/sass-loader": "^8.0.3",
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^8.2.5",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-runtime": "^6.26.0",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
     "eslint": "^8.17.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-loader": "^4.0.2",
     "eslint-webpack-plugin": "^3.1.1",
     "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "happypack": "^5.0.1",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.6.0",
     "sass": "^1.52.2",
     "sass-loader": "^13.0.0",
     "style-loader": "^3.3.1",
-    "ts-loader": "^9.3.0",
+    "ts-loader": "^8.2.0",
     "ts-node": "^10.8.1",
     "tsconfig-paths": "^4.0.0",
     "typescript": "^4.7.3",

src/index.ts

@@ -2,14 +2,14 @@ import './style.scss';
 
 interface SomeObject {
   name: string,
-  age: number
+  age: string
 }
 
 const Ivan: SomeObject = {
   name: 'Ivan',
-  age: 23,
+  age: '23',
 };
 
 // Ivan.name = someName;
 
-console.log('Ivan', Ivan);
+console.log('Ivan - huy', Ivan);

webpack.config.ts

@@ -10,6 +10,7 @@ import CopyWebpackPlugin from 'copy-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import HappyPack from 'happypack';
 
 // FIXME: type of any
 const config = (env: Record<string, any>, argv: Record<string, any>): Configuration => {
@@ -37,9 +38,26 @@ const config = (env: Record<string, any>, argv: Record<string, any>): Configurat
           configFile: path.resolve(__dirname, 'tsconfig.json'),
         },
       }),
+      new HappyPack({
+        loaders: [
+          {
+            path: 'ts-loader',
+            query: { happyPackMode: true },
+            options: {
+              transpileOnly: true,
+              diagnosticOptions: {
+                semantic: true,
+                syntactic: true,
+              },
+            },
+          },
+        ],
+        threads: 4,
+      }),
     ];
 
     if (!isProd) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
       return [...basePluginList, new ESLintPlugin({
         extensions: ['ts'],
         failOnError: true,
@@ -83,20 +101,7 @@ const config = (env: Record<string, any>, argv: Record<string, any>): Configurat
         {
           test: /\.?ts$/,
           exclude: /(node_modules|bower_components)/,
-          use: [
+          use: 'happypack/loader',
-            // {
-            //   loader: 'babel-loader',
-            //   options: {
-            //     presets: ['@babel/preset-env'],
-            //   },
-            // },
-            {
-              loader: 'ts-loader',
-              options: {
-                transpileOnly: true,
-              },
-            },
-          ],
         },
       ],
     },
@@ -108,6 +113,9 @@ const config = (env: Record<string, any>, argv: Record<string, any>): Configurat
       port: 8080,
       watchFiles: './src',
     },
+    performance: {
+      maxAssetSize: 600000,
+    },
   };
 };