npm i --save -D webpack webpack-cli webpack-dev-server

npm i --save -D mini-css-extract-plugin html-webpack-plugin favicons-webpack-plugin @pmmmwh/react-refresh-webpack-plugin filemanager-webpack-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const FileManagerPlugin = require("filemanager-webpack-plugin");

const plugins = [
  new FileManagerPlugin({
    events: {
      // Remove build dir
      onStart: {
        delete: [BUILD_DIR],
      },
      onEnd: {
        // Copy static files
        copy: [
          {
            source: STATIC_DIR,
            destination: BUILD_DIR,
          },
        ],
      },
    },
  }),
  new HtmlWebpackPlugin({
    template: path.join(PUBLIC_DIR, "index.html"),
    filename: "index.html",
  }),
  //
  new FaviconsWebpackPlugin({
    logo: path.resolve(PUBLIC_DIR, "favicon.svg"),
    prefix: "/favicons/",
    outputPath: path.resolve(BUILD_DIR, "favicons"),
    mode: "webapp",
    // Injecting into all HTML Files or separately (for an every instance of HtmlWebpackPlugin)
    // inject: true,
    inject: (htmlPlugin) =>
      path.basename(htmlPlugin.options.filename) === "index.html",
    favicons: {
      icons: {
        appleIcon: false, // Apple touch icons.
        appleStartup: false, // Apple startup images.
        android: false, // Android homescreen icon.
        favicons: true, // Regular favicons.
        coast: false, // Opera Coast icon.
        firefox: false, // Firefox OS icons.
        windows: false, // Windows 8 tile icons.
        yandex: false, // Yandex browser icon.
      },
    },
    cache: false, // Disallow caching the assets across webpack builds.
  }),
  new webpack.HotModuleReplacementPlugin(), // For page reloading
];

if (process.env.SERVE) {
  plugins.push(new ReactRefreshWebpackPlugin());
}

module.exports = {
  devServer,
  plugins,
  entry: path.join(__dirname, "..", "src", "index.tsx"),
  output: {
    path: BUILD_DIR,
    /**
     * Helps to avoid of MIME type ('text/html') is not a supported stylesheet
     * And sets address in html imports
     */
    publicPath: "/",
  },
  // Checking the maximum weight of the bundle is disabled
  performance: {
    hints: false,
  },
  // Modules resolved
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  module: {
    strictExportPresence: true, // Strict mod to avoid of importing non-existent objects
    rules: [
      // --- JS | TS USING BABEL
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: true, // Using a cache to avoid of recompilation
          },
        },
      },
      // --- HTML
      { test: /\.(html)$/, use: ["html-loader"] },
      // --- S/A/C/SS
      {
        test: /\.(s[ac]|c)ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader", // translates css into CommonJS
            options: {
              esModule: true,
              // css modules
              modules: {
                localIdentName: "[name]__[local]__[hash:base64:5]", // format of output
                namedExport: true, // named exports instead of default
              },
            },
          },
          {
            // autoprefixer
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
      // --- S/A/SS
      {
        test: /\.(s[ac])ss$/i,
        use: ["sass-loader"],
      },
      // --- IMG
      {
        test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
        type: "asset/resource",
        generator: {
          filename: "assets/img/[hash][ext]",
        },
      },
      // --- FONTS
      {
        test: /\.(woff2?|eot|ttf|otf)$/i,
        exclude: /node_modules/,
        type: "asset/resource",
        generator: {
          filename: "assets/fonts/[hash][ext]",
        },
      },
    ],
  },
};

npm i --save -D babel-loader html-loader css-loader postcss-loader postcss-preset-env sass-loader

const { merge } = require("webpack-merge");
const common = require("./common.config.js");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const plugins = [
  new MiniCssExtractPlugin({
    filename: "[name].[contenthash].css",
  }),
];

module.exports = merge(common, {
  mode: "development",
  target: "web",
  plugins,
  devtool: "inline-source-map",
  output: {
    filename: "[name].[contenthash].js",
  },
});

const { merge } = require("webpack-merge");
const common = require("./common.config.js");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

const plugins = [
  new MiniCssExtractPlugin({
    filename: "[contenthash].css",
  }),
  // Compress images
  new ImageMinimizerPlugin({
    minimizer: {
      implementation: ImageMinimizerPlugin.imageminMinify,
      options: {
        plugins: [
          ["gifsicle", { interlaced: true }],
          ["jpegtran", { progressive: true }],
          ["optipng", { optimizationLevel: 8 }],
          [
            "svgo",
            {
              plugins: [
                {
                  name: "preset-default",
                  params: {
                    overrides: {
                      removeViewBox: false,
                      addAttributesToSVGElement: {
                        params: {
                          attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
                        },
                      },
                    },
                  },
                },
              ],
            },
          ],
        ],
      },
    },
  }),
];

module.exports = merge(common, {
  mode: "production",
  target: "browserslist",
  plugins,
  devtool: false,
  output: {
    filename: "[fullhash].js",
  },
  optimization: {
    usedExports: false,
    minimize: true, // Affects Terser Plugin
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          mangle: false,
          compress: true,
          output: {
            beautify: true,
            comments: false,
          },
        },
        extractComments: false,
      }),
    ],
  },
});

npm i --save -D image-minimizer-webpack-plugin imagemin imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo

"config": {
    "dev": "--config __webpack__/dev.config.js",
    "prod": "--config __webpack__/prod.config.js"
  },
"scripts": {
    "webpack-config-dev": "nodemon --watch \"./__webpack__/*\" --exec npm run start-dev",
    "webpack-config-prod": "nodemon --watch \"./__webpack__/*\" --exec npm run start-prod",
    "start-dev": "cross-env-shell webpack serve ${npm_package_config_dev}",
    "start-prod": "cross-env-shell webpack serve ${npm_package_config_prod}",
    "build-dev": "cross-env-shell webpack ${npm_package_config_dev}",
    "build-prod": "cross-env-shell webpack ${npm_package_config_prod} --stats-children",
    "clean": "rd /s /q build",
    "lint": "eslint src --ext .js --ext .ts",
    "lint-fix": "eslint src --ext .js --ext .ts --fix",
    "test": "cross-env jest --config __jest__/jest.config.js",
    "test-watch": "jest --watch --config __jest__/jest.config.js",
    "test-coverage": "jest --coverage --config __jest__/jest.config.js"
  },

npm i --save -D nodemon cross-env eslint jest

npm i react react-dom react-redux react-router-dom @reduxjs/toolkit @emotion/react @emotion/styled @mui/icons-material @mui/material

npm i --save -D redux-logger @types/redux-logger

{
    "root": true,
    "extends": [
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 2015,
        "ecmaFeatures": {
            "jsx": true // JSX-compatible
        }
    },
    "env": {
        "es6": true,
        "browser": true,
        "node": true
    },
    "plugins": [
        "@typescript-eslint",
        "react"
    ],
    "rules": {
        "@typescript-eslint/no-var-requires": "off", // To avoid of error: "Require statement not part of import statement", if ES modules are used 
        "semi": [
            "error",
            "always"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "indent": "off",
        "no-fallthrough": "off", // disallow fallthrough of case statements
        "no-multiple-empty-lines": [
            1,
            {
                "max": 2
            }
        ], // disallow multiple empty lines (off by default)
        "no-nested-ternary": 1, // disallow nested ternary expressions (off by default)
        "eqeqeq": 2, // require the use of === and !==
        "react/prop-types": "off" // Prevent missing props validation in a React component definition
    },
    "settings": {
        "react": {
            "version": "detect" // Tell eslint-plugin-react to automatically detect the latest version of react.
        }
    }
}

npm i --save -D eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser

const plugins = [];

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript",
  ],
  plugins,
};

npm i --save -D @babel/preset-env @babel/preset-react @babel/preset-typescript

{
    "compilerOptions": {
        "rootDirs": [
            "src",
            "__jest__"
        ],
        "outDir": "build",
        "lib": [
            "dom",
            "esnext"
        ],
        // This will include all packages from array only
        // node_modules/@types - is default path. Required, otherwise it will be ignored.
        "typeRoots": [
            "node_modules/@types",
            "src/types"
        ],
        "target": "es5",
        "skipLibCheck": true, // Skip type checking of declaration files (.d.ts)
        "esModuleInterop": true, // Creates __importStar and __importDefault helpers for compatibility with the Babel
        "allowSyntheticDefaultImports": true, // allows import w/o default prop
        "strict": true, // Еnabling all of the strict mode family options
        "forceConsistentCasingInFileNames": true, // Force consistent casing in file names
        "noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statements
        "module": "esnext", // Sets the module system for the program. Also it's required when use outFile option. 
        "moduleResolution": "node", // Specify the module resolution strategy
        "resolveJsonModule": true, // Allows importing modules with a ‘.json’ extension, which is a common practice in node projects
        "isolatedModules": true, // all implementation files must be modules (which means it has some form of import/export)
        "noImplicitAny": true, // Raise error if the type "any" is specified somewhere
        "noImplicitThis": true, // Raise error on "this" expressions with an implied "any" type
        "noUnusedLocals": true, // Raise errors on unused local variables
        "noEmit": true, // Do not emit compiler output files like JavaScript source code, source-maps or declarations
        "jsx": "react",
        "plugins": [
            {
                "name": "typescript-plugin-css-modules", // auto-genertes virtual .d.ts for an every css file
                "options": {
                    "customTemplate": "./customTemplate.js"
                }
            }
        ]
    },
    "exclude": [
        "node_modules",
        "build",
        "coverage",
        "webpack.*.js",
        "*.config.js",
        "**/*.test.ts*"
    ]
}

npm i --save -D typescript typescript-plugin-css-modules

module.exports = (dts, { classes }) => {
  return Object.keys(classes)
    .map((key) => `export const ${key}: string`)
    .join("\n");
};

module.exports = {
  roots: ["../__tests__", "../src"],
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"], // Modules are meant for code which is repeating in each test file
  moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/filesMock.js",
  },
  transform: {
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.tsx?$": "ts-jest",
    ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform",
  },
  testMatch: ["**/?(*.)(spec|test).[jt]s?(x)"], // Finds test files named like abc.test|spec.ts?tsx|js|jsx in roots:[] prop.
  testEnvironment: "jsdom", // To avoid of js DOM errors
};

import "@testing-library/jest-dom";

import React, { PropsWithChildren } from "react";
import { render } from "@testing-library/react";
import type { RenderOptions } from "@testing-library/react";
import { configureStore } from "@reduxjs/toolkit";
import type { PreloadedState } from "@reduxjs/toolkit";
import { Provider } from "react-redux";

import type { store, RootState } from "../../src/core/redux/store";
// As a basic setup, import your same slice reducers
import { postSlice } from "../../src/core/redux/slices/postSlice";
import { thunkSlice } from "../../src/core/redux/slices/thunkSlice";

// This type interface extends the default options for render from RTL, as well
// as allows the user to specify other things such as initialState, store.
interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {
  preloadedState?: PreloadedState<RootState>;
  // store?: AppStore;
  store?: typeof store;
}

export function renderWithProviders(
  ui: React.ReactElement,
  {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = configureStore({
      reducer: {
        postReducer: postSlice.reducer,
        thunkReducer: thunkSlice.reducer,
      },
      preloadedState,
    }),
    ...renderOptions
  }: ExtendedRenderOptions = {}
) {
  function Wrapper({ children }: PropsWithChildren<object>): JSX.Element {
    return <Provider store={store}>{children}</Provider>;
  }

  // Return an object with the store and all of RTL's query functions
  return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
}

npm i --save -D ts-jest jest-environment-jsdom jest-css-modules-transform babel-jest @types/jest @testing-library/react @testing-library/jest-dom

{
    "editor.formatOnSave": true,
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "typescript.updateImportsOnFileMove.enabled": "always",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "typescript"
    ],
    "typescript.tsdk": "node_modules\\typescript\\lib", // Use Workspace Version for using plugins from tsconfig
    "typescript.enablePromptUseWorkspaceTsdk": true
}