Merge branch 'webpack'

2022-06-10 11:48:10 +05:00 · 2022-06-10 11:48:10 +05:00 · 5ed32e7054
commit 5ed32e7054
parent ac0e7d1057 9f69507032
11 changed files with 13227 additions and 0 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,27 @@
+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-explicit-any": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-unsafe-call": "off",
+    "no-console": "off",
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  ignorePatterns: ['.eslintrc.js']
+};
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,3 @@
 .idea
+dist
 node_modules
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,53 @@
+{
+  "name": "excel-course",
+  "version": "1.0.0",
+  "main": "index.js",
+  "devDependencies": {
+    "@types/happypack": "^5.0.2",
+    "@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",
+    "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-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": "^8.2.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-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 serve --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",
+  "module": "true"
+}
--- a/src/favicon.ico
+++ b/src/favicon.ico
--- a/src/index.html
+++ b/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!s</h1>
+</body>
+</html>
--- a/src/index.ts
+++ b/src/index.ts
@ -0,0 +1,15 @@
+import './style.scss';
+
+interface SomeObject {
+  name: string,
+  age: string
+}
+
+const Ivan: SomeObject = {
+  name: 'Ivan',
+  age: '23',
+};
+
+// Ivan.name = someName;
+
+console.log('Ivan - huy', Ivan);
--- a/src/style.scss
+++ b/src/style.scss
@ -0,0 +1,6 @@
+body {
+  background-color: darkkhaki;
+  h1 {
+    color: darkslategrey;
+  }
+}
--- a/tsconfig-for-webpack-config.json
+++ b/tsconfig-for-webpack-config.json
@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "esModuleInterop": true
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "target": "es3",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "CommonJS",
+      "strictPropertyInitialization": true
+    }
+  },
+  "exclude": ["node_modules"]
+}
--- a/webpack.config.ts
+++ b/webpack.config.ts
@ -0,0 +1,122 @@
+import * as path from 'path';
+
+// 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 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 => {
+  const isProd = argv.mode === 'production';
+
+  const getFilename = (ext: string): string => `[name]${isProd ? '-[hash]' : ''}.${ext}`;
+  const getSourceMap = () => (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'),
+        },
+      }),
+      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,
+      })];
+    }
+
+    return basePluginList;
+  };
+
+  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: getPluginList(),
+    module: {
+      rules: [
+        {
+          test: /\.s[ac]ss$/i,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            'sass-loader',
+          ],
+        },
+        {
+          test: /\.?ts$/,
+          exclude: /(node_modules|bower_components)/,
+          use: 'happypack/loader',
+        },
+      ],
+    },
+    devServer: {
+      static: {
+        directory: path.join(__dirname, 'static'),
+      },
+      compress: true,
+      port: 8080,
+      watchFiles: './src',
+    },
+    performance: {
+      maxAssetSize: 600000,
+    },
+  };
+};
+
+export default config;