Bump dependencies.

Updated eslintrc

Author: glook

.eslintrc.js

@@ -8,8 +8,7 @@ module.exports = {
     },
     extends: [
         'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-        'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-        'prettier/react', // disables react-specific linting rules that conflict with prettier
+        'prettier',
     ],
     parserOptions: {
         project: path.resolve(__dirname, './tsconfig.json'),

package.json

@@ -1,6 +1,6 @@
 {
     "name": "webpack-typescript-react",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "description": "Webpack 5 boilerplate with support of most common loaders and modules",
     "keywords": [
         "react",
@@ -29,82 +29,82 @@
         }
     },
     "dependencies": {
-        "@types/classnames": "^2.2.10",
-        "@types/react": "^16.9.53",
-        "@types/react-dom": "^16.9.8",
-        "classnames": "^2.2.6",
+        "@types/classnames": "^2.3.0",
+        "@types/react": "^17.0.37",
+        "@types/react-dom": "^17.0.11",
+        "classnames": "^2.3.1",
         "normalize.css": "^8.0.1",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1"
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
     },
     "devDependencies": {
-        "@babel/core": "~7.12.3",
-        "@babel/plugin-proposal-class-properties": "~7.12.1",
-        "@babel/plugin-proposal-export-default-from": "^7.12.1",
-        "@babel/plugin-proposal-export-namespace-from": "~7.12.1",
-        "@babel/plugin-proposal-object-rest-spread": "~7.12.1",
-        "@babel/plugin-proposal-throw-expressions": "~7.12.1",
+        "@babel/core": "~7.16.0",
+        "@babel/plugin-proposal-class-properties": "~7.16.0",
+        "@babel/plugin-proposal-export-default-from": "^7.16.0",
+        "@babel/plugin-proposal-export-namespace-from": "~7.16.0",
+        "@babel/plugin-proposal-object-rest-spread": "~7.16.0",
+        "@babel/plugin-proposal-throw-expressions": "~7.16.0",
         "@babel/plugin-syntax-dynamic-import": "~7.8.3",
-        "@babel/plugin-transform-runtime": "~7.12.1",
-        "@babel/preset-env": "~7.12.1",
-        "@babel/preset-react": "~7.12.1",
-        "@babel/register": "~7.12.1",
-        "@pmmmwh/react-refresh-webpack-plugin": "~0.5.1",
-        "@svgr/webpack": "~5.4.0",
-        "@teamsupercell/typings-for-css-modules-loader": "~2.4.0",
-        "@typescript-eslint/eslint-plugin": "~4.7.0",
-        "@typescript-eslint/parser": "~4.7.0",
-        "autoprefixer": "~10.0.1",
+        "@babel/plugin-transform-runtime": "~7.16.4",
+        "@babel/preset-env": "~7.16.4",
+        "@babel/preset-react": "~7.16.0",
+        "@babel/register": "~7.16.0",
+        "@pmmmwh/react-refresh-webpack-plugin": "~0.5.3",
+        "@svgr/webpack": "~6.1.2",
+        "@teamsupercell/typings-for-css-modules-loader": "~2.5.1",
+        "@typescript-eslint/eslint-plugin": "~5.6.0",
+        "@typescript-eslint/parser": "~5.6.0",
+        "autoprefixer": "~10.4.0",
         "babel-eslint": "~10.1.0",
-        "babel-loader": "~8.2.1",
-        "clean-webpack-plugin": "~3.0.0",
-        "copy-webpack-plugin": "~6.3.0",
-        "core-js": "~3.7.0",
+        "babel-loader": "~8.2.3",
+        "clean-webpack-plugin": "~4.0.0",
+        "copy-webpack-plugin": "~10.1.0",
+        "core-js": "~3.19.3",
         "cross-env": "^7.0.3",
-        "css-loader": "~5.0.0",
-        "cssnano": "~4.1.10",
-        "eslint": "~7.13.0",
-        "eslint-config-airbnb-base": "~14.2.0",
-        "eslint-config-airbnb-typescript": "~12.0.0",
-        "eslint-config-prettier": "~6.15.0",
+        "css-loader": "~6.5.1",
+        "cssnano": "~5.0.12",
+        "eslint": "~8.4.1",
+        "eslint-config-airbnb-base": "~15.0.0",
+        "eslint-config-airbnb-typescript": "~16.1.0",
+        "eslint-config-prettier": "~8.3.0",
         "eslint-import-resolver-alias": "~1.1.2",
-        "eslint-plugin-import": "~2.22.1",
-        "eslint-plugin-jsx-a11y": "~6.4.1",
-        "eslint-plugin-react": "~7.21.5",
-        "eslint-plugin-react-hooks": "~4.2.0",
-        "eslint-webpack-plugin": "~2.2.1",
-        "fork-ts-checker-webpack-plugin": "~6.0.1",
-        "html-loader": "~1.3.2",
-        "html-webpack-plugin": "~5.0.0-alpha.6",
-        "husky": "~4.3.0",
+        "eslint-plugin-import": "~2.25.3",
+        "eslint-plugin-jsx-a11y": "~6.5.1",
+        "eslint-plugin-react": "~7.27.1",
+        "eslint-plugin-react-hooks": "~4.3.0",
+        "eslint-webpack-plugin": "~3.1.1",
+        "fork-ts-checker-webpack-plugin": "~6.5.0",
+        "html-loader": "~3.0.1",
+        "html-webpack-plugin": "~5.5.0",
+        "husky": "~7.0.4",
         "import-sort-style-module-and-prefix": "~0.1.3",
         "is-windows": "~1.0.2",
-        "less": "~3.12.2",
-        "less-loader": "~7.0.2",
-        "lint-staged": "~10.5.0",
-        "mini-css-extract-plugin": "~1.3.0",
+        "less": "~4.1.2",
+        "less-loader": "~10.2.0",
+        "lint-staged": "~12.1.2",
+        "mini-css-extract-plugin": "~2.4.5",
         "path": "~0.12.7",
-        "postcss": "~8.2.5",
-        "postcss-loader": "~4.0.4",
-        "prettier": "~2.1.2",
-        "prettier-plugin-import-sort": "~0.0.6",
-        "pretty-quick": "~3.1.0",
-        "react-refresh": "~0.10.0",
-        "regenerator-runtime": "~0.13.7",
-        "resolve-url-loader": "~3.1.2",
-        "sass": "~1.29.0",
-        "sass-loader": "~10.0.4",
-        "sass-resources-loader": "~2.1.1",
-        "style-loader": "~2.0.0",
-        "svg-url-loader": "~6.0.0",
-        "terser-webpack-plugin": "~5.0.1",
-        "ts-loader": "~8.0.7",
-        "typescript": "~4.0.3",
+        "postcss": "~8.4.5",
+        "postcss-loader": "~6.2.1",
+        "prettier": "~2.5.1",
+        "prettier-plugin-import-sort": "~0.0.7",
+        "pretty-quick": "~3.1.2",
+        "react-refresh": "~0.11.0",
+        "regenerator-runtime": "~0.13.9",
+        "resolve-url-loader": "~4.0.0",
+        "sass": "~1.45.0",
+        "sass-loader": "~12.4.0",
+        "sass-resources-loader": "~2.2.4",
+        "style-loader": "~3.3.1",
+        "svg-url-loader": "~7.1.1",
+        "terser-webpack-plugin": "~5.2.5",
+        "ts-loader": "~9.2.6",
+        "typescript": "~4.5.3",
         "url-loader": "~4.1.1",
-        "webpack": "~5.64.0",
+        "webpack": "~5.65.0",
         "webpack-bundle-analyzer": "~4.5.0",
         "webpack-cli": "~4.9.1",
-        "webpack-dev-server": "~4.5.0",
+        "webpack-dev-server": "~4.6.0",
         "webpack-merge": "~5.8.0"
     },
     "importSort": {

src/components/app/app.module.scss

@@ -12,4 +12,16 @@
         height: $size;
         margin: 25px 0 0 0;
     }
+
+    &-link {
+        display: block;
+        margin: 20px 0 0 0;
+        font-family: 'Open Sans', sans-serif;
+        font-weight: 400;
+        color: #fff;
+        text-decoration: none;
+        &:hover {
+            color: #e8e8e8;
+        }
+    }
 }

src/components/app/app.module.scss.d.ts

@@ -4,6 +4,7 @@ declare namespace AppModuleScssNamespace {
     export interface IAppModuleScss {
         stylesHeader: string;
         stylesImage: string;
+        stylesLink: string;
     }
 }
 

src/components/app/app.tsx

@@ -1,10 +1,12 @@
 /**
  * Created by: Andrey Polyakov ([email protected])
  */
+
+import cn from 'classnames';
 import React, {Suspense, lazy} from 'react';
 
 import {stylesContainer} from './app.module.less';
-import {stylesHeader, stylesImage} from './app.module.scss';
+import {stylesHeader, stylesImage, stylesLink} from './app.module.scss';
 
 const LazyStrawberryIcon = lazy(() => import('./strawberry'));
 export const App = (): React.ReactElement => (
@@ -13,5 +15,14 @@ export const App = (): React.ReactElement => (
         <Suspense fallback={'loading...'}>
             <LazyStrawberryIcon className={stylesImage} />
         </Suspense>
+        <div>
+            <a
+                className={cn(stylesLink)}
+                href="https://github.com/glook/webpack-typescript-react"
+                target="_blank"
+            >
+                @glook/webpack-typescript-react
+            </a>
+        </div>
     </div>
 );

src/index.html

@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <title>Webpack5 typescript react boilerplate</title>
         <link
-            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;400&display=swap"
             rel="stylesheet"
         />
     </head>

webpack/config/devServer.js

@@ -2,14 +2,10 @@
  * Created by: Andrey Polyakov ([email protected])
  * @see https://webpack.js.org/configuration/dev-server/
  */
-import isWindows from 'is-windows';
 
+import {defaultPort, devServerHost} from '../utils/env';
 import {devServerProxyConfig} from './devServierProxy';
 
-const defaultPort = 8080;
-
-const devServerHost = isWindows() ? '127.0.0.1' : '0.0.0.0';
-
 export const devServerUrl = `http://${devServerHost}:${defaultPort}/`;
 
 export const devServerConfig = {

webpack/utils/env.js

@@ -3,9 +3,13 @@
  */
 import {join} from 'path';
 
+import isWindows from 'is-windows';
+
 export const mode = process.env.NODE_ENV ?? 'production';
 export const isDevServer = process.env.WEBPACK_IS_DEV_SERVER === 'true';
 export const isProd = mode === 'production';
 export const isDev = !isProd;
 export const rootDir = join(__dirname, '../../');
 export const webpackDir = join(__dirname, '../');
+export const defaultPort = 8080;
+export const devServerHost = isWindows() ? '127.0.0.1' : '0.0.0.0';