work with webpack

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/typescript", ["@babel/env", { "modules": false }]]
+}

.gitignore

@@ -1,2 +1,3 @@
 .idea
+dist
 node_modules

package.json

@@ -1,14 +1,148 @@
 {
+  "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",
+    "@babel/core": "^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",
+    "babel-loader": "^8.2.5",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
+    "css-loader": "^6.7.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-node": "^10.8.1",
     "tsconfig-paths": "^4.0.0",
     "typescript": "^4.7.3",
+    "webpack": "^5.73.0",
     "webpack-cli": "^4.9.2"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://ksv741:SFwZWz868cyAGh3Cps6Y@bitbucket.org/ksv741/excel-course.git"
+  },
   "scripts": {
-    "build": "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 --mode=development",
+    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack --mode=production"
+  },
+  "keywords": [],
+  "author": "ksv741",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://bitbucket.org/ksv741/excel-course/issues"
+  },
+  "homepage": "https://bitbucket.org/ksv741/excel-course#readme",
+  "description": "",
+  "browserslist": "> 0.25%, not dead"
 }

src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" href="favicon.ico " type="image/x-icon">
+  <title>Excel course</title>
+</head>
+<body>
+  <div id="app" class="container">CONTAINER</div>
+  <h1>hello</h1>
+</body>
+</html>

src/index.ts

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

src/style.scss

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

tsconfig.json

@@ -2,10 +2,10 @@
   "compilerOptions": {
     "outDir": "./dist/",
     "noImplicitAny": true,
-    "target": "es5",
-    "jsx": "react",
+    "target": "es3",
     "allowJs": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "esModuleInterop": true
   },
   "ts-node": {
     "compilerOptions": {

webpack.config.ts

@@ -1,15 +1,76 @@
 import * as path from 'path';
 import * as webpack from 'webpack';
-// in case you run into any typescript error when configuring `devServer`
-// import 'webpack-dev-server';
 
-const config: webpack.Configuration = {
-  context: path.resolve(__dirname, 'src'),
-  entry: './index.ts',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name]-[hash].bundle.js',
-  },
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+
+// FIXME: type of any
+const config = (env: Record<string, any>, argv: Record<string, any>): webpack.Configuration => {
+
+  const isProd = argv.mode === 'production';
+
+  const getFilename = (ext: string): string => {
+    return `[name]${isProd ? '-[hash]' : ''}.${ext}`;
+  }
+
+  const getSourceMap = () => {
+    return isProd ? false : 'source-map'
+  }
+
+  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: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+        '@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')
+      }),
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.s[ac]ss$/i,
+          use: [
+            MiniCssExtractPlugin.loader,
+            "css-loader",
+            "sass-loader",
+          ],
+        },
+        {
+          test: /\.m?tsx?$/,
+          exclude: /(node_modules|bower_components)/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env']
+            }
+          }
+        }
+      ],
+    },
+  }
 };
 
 export default config;