update webpack settings

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/restrict-template-expressions": "off",
+    "@typescript-eslint/unbound-method": "off",
     "arrow-parens": "off",
     "class-methods-use-this": "off",
     "func-names": "off",
@@ -32,6 +33,7 @@ module.exports = {
     "linebreak-style": "off",
     "max-len": "off",
     "no-console": "off",
+    "no-new": "off",
     "no-plusplus": "off",
     "object-curly-newline": "off",
   },

package.json

@@ -11,15 +11,12 @@
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
     "copy-webpack-plugin": "^11.0.0",
-    "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
     "dotenv": "^16.0.1",
     "eslint": "^8.17.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "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",
@@ -27,8 +24,8 @@
     "ssh2-sftp-client": "^5.3.2",
     "style-loader": "^3.3.1",
     "ts-loader": "^8.2.0",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.8.2",
-    "tsconfig-paths": "^4.0.0",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.7.3",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.9.2",
@@ -39,8 +36,8 @@
     "url": "git+https://ksv741:SFwZWz868cyAGh3Cps6Y@bitbucket.org/ksv741/excel-course.git"
   },
   "scripts": {
-    "start": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack serve --mode=development",
+    "start": "webpack serve --mode=development",
-    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack --mode=production",
+    "build": "webpack --mode=production",
     "deploy": "node deploy-config"
   },
   "keywords": [],

tsconfig-for-webpack-config.json

@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "target": "es5",
-    "esModuleInterop": true
-  }
-}

tsconfig.json

@@ -6,15 +6,21 @@
     "allowJs": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "sourceMap": true
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "components/*": ["src/components/*"],
+      "core/*": ["src/core/*"],
+      "pages/*": ["src/pages/*"],
+      "redux/*": ["src/redux/*"],
+    }
   },
   "ts-node": {
     "compilerOptions": {
       "module": "CommonJS",
-      "strictPropertyInitialization": true
+      "strictPropertyInitialization": true,
+      "sourceMap": true
     }
   },
-  "exclude": ["node_modules",
+  "exclude": ["node_modules"],
-    "deploy-config.js"
-  ],
 }

webpack.config.ts

@@ -1,4 +1,5 @@
-import * as path from 'path';
+// import * as path from 'path';
+import path from 'path';
 
 // FIXME:
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -9,51 +10,33 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 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 TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
-import HappyPack from 'happypack';
 
 // FIXME: type of any
 const config = (env: Record<string, any>, argv: Record<string, any>): Configuration => {
   const isProd = argv.mode === 'production';
 
-  const getFilename = (ext: string): string => `[name]${isProd ? '-[hash]' : ''}.${ext}`;
+  const getFilename = (ext: string): string => `[name]${isProd ? '-[fullhash]' : ''}.${ext}`;
-  const getSourceMap = () => (isProd ? false : 'inline-source-map');
+  const getSourceMap = () => (isProd ? false : 'cheap-source-map');
+
+  const extensions = ['.ts', '.tsx', '.js', '.jsx', '.json', '.scss'];
 
   const getPluginList = (): any[] => {
     const basePluginList = [
       new HtmlWebpackPlugin({
-        minify: false,
+        minify: isProd,
         template: './index.html',
       }),
+
       new CopyWebpackPlugin({
         patterns: [
           { from: 'favicon.ico', to: './' },
         ],
       }),
+
       new MiniCssExtractPlugin({
         filename: getFilename('css'),
       }),
-      new ForkTsCheckerWebpackPlugin({
-        typescript: {
-          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) {
@@ -69,42 +52,67 @@ const config = (env: Record<string, any>, argv: Record<string, any>): Configurat
 
   return {
     context: path.resolve(__dirname, 'src'),
+
     entry: [
       // 'core-js/stable',
       // 'regenerator-runtime/runtime',
       './index.ts',
     ],
+
     devtool: getSourceMap(),
+
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: getFilename('js'),
       clean: true,
     },
+
     resolve: {
-      alias: {
+      extensions,
-        '@': path.resolve(__dirname, 'src/'),
+      plugins: [new TsconfigPathsPlugin({
-        '@core': path.resolve(__dirname, 'src/core/'),
+        configFile: path.resolve(__dirname, 'tsconfig.json'),
-      },
+        extensions,
-      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.scss'],
+      })],
     },
+
     plugins: getPluginList(),
+
     module: {
       rules: [
         {
           test: /\.s[ac]ss$/i,
           use: [
             MiniCssExtractPlugin.loader,
-            'css-loader',
+            {
-            'sass-loader',
+              loader: 'css-loader',
+              options: {
+                sourceMap: true,
+              },
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true,
+              },
+            },
           ],
         },
+
         {
           test: /\.?ts$/,
           exclude: /(node_modules|bower_components)/,
-          use: 'happypack/loader',
+          use: [
+            {
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+              },
             },
           ],
         },
+      ],
+    },
+
     devServer: {
       static: {
         directory: path.join(__dirname, 'static'),
@@ -113,6 +121,7 @@ const config = (env: Record<string, any>, argv: Record<string, any>): Configurat
       port: 80,
       watchFiles: './src',
     },
+
     performance: {
       maxAssetSize: 600000,
     },