work with webpack

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["@babel/typescript", ["@babel/env", { "modules": false }]]
+  "presets": ["es2015"],
+  "plugins": ["transform-runtime"]
 }

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'airbnb/base',
+    'airbnb-typescript/base',
+  ],
+  parserOptions: {
+    project: './tsconfig.json'
+  },
+  rules: {
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "no-console": "off"
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  ignorePatterns: ['.eslintrc.js']
+};

dist/main-318575f579f66b458d2a.bundle.js

@@ -1,32 +0,0 @@
-/*
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-/******/ (() => { // webpackBootstrap
-/******/ 	var __webpack_modules__ = ({
-
-/***/ "./index.ts":
-/*!******************!*\
-  !*** ./index.ts ***!
-  \******************/
-/***/ (() => {
-
-eval("console.log('Webpack with typescript');\n\n//# sourceURL=webpack:///./index.ts?");
-
-/***/ })
-
-/******/ 	});
-/************************************************************************/
-/******/ 	
-/******/ 	// startup
-/******/ 	// Load entry module and return exports
-/******/ 	// This entry module can't be inlined because the eval devtool is used.
-/******/ 	var __webpack_exports__ = {};
-/******/ 	__webpack_modules__["./index.ts"]();
-/******/ 	
-/******/ })()
-;

package.json

@@ -107,33 +107,50 @@
   "devDependencies": {
     "@babel/cli": "^7.17.10",
     "@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",
     "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-node": "^10.8.1",
     "tsconfig-paths": "^4.0.0",
     "typescript": "^4.7.3",
     "webpack": "^5.73.0",
-    "webpack-cli": "^4.9.2"
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.2"
   },
   "repository": {
     "type": "git",
     "url": "git+https://ksv741:SFwZWz868cyAGh3Cps6Y@bitbucket.org/ksv741/excel-course.git"
   },
   "scripts": {
-    "start": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack --mode=development",
+    "start": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack serve --mode=development",
     "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack --mode=production"
   },
   "keywords": [],
@@ -144,5 +161,6 @@
   },
   "homepage": "https://bitbucket.org/ksv741/excel-course#readme",
   "description": "",
-  "browserslist": "> 0.25%, not dead"
+  "browserslist": "> 0.25%, not dead",
+  "module": "true"
 }

src/index.html

@@ -9,6 +9,6 @@
 </head>
 <body>
   <div id="app" class="container">CONTAINER</div>
-  <h1>hello</h1>
+  <h1>hello!s</h1>
 </body>
 </html>

src/index.ts

@@ -1,22 +1,15 @@
-
 import './style.scss';
 
-console.log('Webpack with typescript');
-
-const a = 25;
-
-const Persone = {
-  name: 'huy',
-  age: 25,
-  skils: ['html', 'css', 'js']
+interface SomeObject {
+  name: string,
+  age: number
 }
 
-console.log('Persone', Persone);
+const Ivan: SomeObject = {
+  name: 'Ivan',
+  age: 23,
+};
 
-const start = new Promise((res, rej) => {
-  console.log('ONE!');
-})
+// Ivan.name = someName;
 
-start.then(() => {
-  console.log('DWO');
-})
+console.log('Ivan', Ivan);

src/style.scss

@@ -1,6 +1,6 @@
 body {
-  background-color: #f2f2f2;
+  background-color: darkkhaki;
   h1 {
-    color: red;
+    color: darkslategrey;
   }
 }

tsconfig.json

@@ -9,7 +9,9 @@
   },
   "ts-node": {
     "compilerOptions": {
-      "module": "CommonJS"
+      "module": "CommonJS",
+      "strictPropertyInitialization": true
     }
-  }
+  },
+  "exclude": ["node_modules"]
 }

webpack.config.ts

@@ -1,76 +1,114 @@
 import * as path from 'path';
-import * as webpack from 'webpack';
+
+// FIXME:
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
+import type { Configuration } from 'webpack';
 
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
-import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import ESLintPlugin from 'eslint-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
 // FIXME: type of any
-const config = (env: Record<string, any>, argv: Record<string, any>): webpack.Configuration => {
-
+const config = (env: Record<string, any>, argv: Record<string, any>): Configuration => {
   const isProd = argv.mode === 'production';
 
-  const getFilename = (ext: string): string => {
-    return `[name]${isProd ? '-[hash]' : ''}.${ext}`;
-  }
+  const getFilename = (ext: string): string => `[name]${isProd ? '-[hash]' : ''}.${ext}`;
+  const getSourceMap = () => (isProd ? false : 'source-map');
 
-  const getSourceMap = () => {
-    return isProd ? false : 'source-map'
-  }
+  const getPluginList = (): any[] => {
+    const basePluginList = [
+      new HtmlWebpackPlugin({
+        minify: false,
+        template: './index.html',
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          { from: 'favicon.ico', to: './' },
+        ],
+      }),
+      new MiniCssExtractPlugin({
+        filename: getFilename('css'),
+      }),
+      new ForkTsCheckerWebpackPlugin({
+        typescript: {
+          configFile: path.resolve(__dirname, 'tsconfig.json'),
+        },
+      }),
+    ];
+
+    if (!isProd) {
+      return [...basePluginList, new ESLintPlugin({
+        extensions: ['ts'],
+        failOnError: true,
+      })];
+    }
+
+    return basePluginList;
+  };
 
   return {
     context: path.resolve(__dirname, 'src'),
-    entry: ['core-js/stable', 'regenerator-runtime/runtime','./index.ts'],
+    entry: [
+      // 'core-js/stable',
+      // 'regenerator-runtime/runtime',
+      './index.ts',
+    ],
     devtool: getSourceMap(),
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: getFilename('js'),
-      clean: true
+      clean: true,
     },
     resolve: {
       extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
       alias: {
         '@': path.resolve(__dirname, 'src'),
-        '@core': path.resolve(__dirname, 'src', '@core')
-      }
+        '@core': path.resolve(__dirname, 'src', '@core'),
+      },
     },
-    plugins: [
-      new HtmlWebpackPlugin({
-        minify: false,
-        template: './index.html'
-      }),
-      new CopyWebpackPlugin({
-        patterns: [
-          { from: "favicon.ico", to: "./" },
-        ],
-      }),
-      new MiniCssExtractPlugin({
-        filename: getFilename('css')
-      }),
-    ],
+    plugins: getPluginList(),
     module: {
       rules: [
         {
           test: /\.s[ac]ss$/i,
           use: [
             MiniCssExtractPlugin.loader,
-            "css-loader",
-            "sass-loader",
+            'css-loader',
+            'sass-loader',
           ],
         },
         {
-          test: /\.m?tsx?$/,
+          test: /\.?ts$/,
           exclude: /(node_modules|bower_components)/,
-          use: {
-            loader: 'babel-loader',
-            options: {
-              presets: ['@babel/preset-env']
-            }
-          }
-        }
+          use: [
+            // {
+            //   loader: 'babel-loader',
+            //   options: {
+            //     presets: ['@babel/preset-env'],
+            //   },
+            // },
+            {
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+              },
+            },
+          ],
+        },
       ],
     },
-  }
+    devServer: {
+      static: {
+        directory: path.join(__dirname, 'static'),
+      },
+      compress: true,
+      port: 8080,
+      watchFiles: './src',
+    },
+  };
 };
 
 export default config;