1.0.7

* Fixed css import error
* Dropped devServer host,port properties
* Removed is-windows dev dependency
* Added default *.json declaration
* Removed husky due to simple-git-hooks
* Bump dependencies

Author: glook

package.json

@@ -1,6 +1,6 @@
 {
     "name": "webpack-typescript-react",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "description": "Webpack 5 boilerplate with support of most common loaders and modules",
     "keywords": [
         "react",
@@ -22,89 +22,85 @@
         "start": "cross-env WEBPACK_IS_DEV_SERVER=true NODE_ENV=development webpack serve --config webpack.config.babel.js",
         "release": "npm version patch"
     },
-    "husky": {
-        "hooks": {
-            "pre-commit": "lint-staged",
-            "post-commit": "git update-index --again"
-        }
+    "simple-git-hooks": {
+        "pre-commit": "npx lint-staged",
+        "post-commit": "git update-index --again"
     },
     "dependencies": {
         "@types/classnames": "^2.3.0",
-        "@types/react": "^17.0.37",
+        "@types/react": "^17.0.38",
         "@types/react-dom": "^17.0.11",
         "classnames": "^2.3.1",
         "normalize.css": "^8.0.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2"
     },
     "devDependencies": {
-        "@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/core": "~7.16.7",
+        "@babel/plugin-proposal-class-properties": "~7.16.7",
+        "@babel/plugin-proposal-export-default-from": "^7.16.7",
+        "@babel/plugin-proposal-export-namespace-from": "~7.16.7",
+        "@babel/plugin-proposal-object-rest-spread": "~7.16.7",
+        "@babel/plugin-proposal-throw-expressions": "~7.16.7",
         "@babel/plugin-syntax-dynamic-import": "~7.8.3",
-        "@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",
+        "@babel/plugin-transform-runtime": "~7.16.7",
+        "@babel/preset-env": "~7.16.7",
+        "@babel/preset-react": "~7.16.7",
+        "@babel/register": "~7.16.7",
+        "@pmmmwh/react-refresh-webpack-plugin": "~0.5.4",
         "@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",
+        "@typescript-eslint/eslint-plugin": "~5.9.0",
+        "@typescript-eslint/parser": "~5.9.0",
+        "autoprefixer": "~10.4.2",
         "babel-eslint": "~10.1.0",
         "babel-loader": "~8.2.3",
         "clean-webpack-plugin": "~4.0.0",
-        "copy-webpack-plugin": "~10.1.0",
-        "core-js": "~3.19.3",
+        "copy-webpack-plugin": "~10.2.0",
+        "core-js": "~3.20.2",
         "cross-env": "^7.0.3",
         "css-loader": "~6.5.1",
-        "cssnano": "~5.0.12",
-        "eslint": "~8.4.1",
+        "cssnano": "~5.0.15",
+        "eslint": "~8.6.0",
         "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.25.3",
+        "eslint-plugin-import": "~2.25.4",
         "eslint-plugin-jsx-a11y": "~6.5.1",
-        "eslint-plugin-react": "~7.27.1",
+        "eslint-plugin-react": "~7.28.0",
         "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-loader": "~3.1.0",
         "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": "~4.1.2",
         "less-loader": "~10.2.0",
-        "lint-staged": "~12.1.2",
-        "mini-css-extract-plugin": "~2.4.5",
+        "mini-css-extract-plugin": "~2.4.6",
         "path": "~0.12.7",
         "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",
+        "pretty-quick": "~3.1.3",
         "react-refresh": "~0.11.0",
         "regenerator-runtime": "~0.13.9",
         "resolve-url-loader": "~4.0.0",
-        "sass": "~1.45.0",
+        "sass": "~1.47.0",
         "sass-loader": "~12.4.0",
         "sass-resources-loader": "~2.2.4",
+        "simple-git-hooks": "^2.7.0",
         "style-loader": "~3.3.1",
         "svg-url-loader": "~7.1.1",
-        "terser-webpack-plugin": "~5.2.5",
+        "terser-webpack-plugin": "~5.3.0",
         "ts-loader": "~9.2.6",
-        "typescript": "~4.5.3",
+        "typescript": "~4.5.4",
         "url-loader": "~4.1.1",
         "webpack": "~5.65.0",
         "webpack-bundle-analyzer": "~4.5.0",
         "webpack-cli": "~4.9.1",
-        "webpack-dev-server": "~4.6.0",
+        "webpack-dev-server": "~4.7.2",
         "webpack-merge": "~5.8.0"
     },
     "importSort": {

src/@types/declarations.d.ts

@@ -14,6 +14,12 @@ declare module "*.svg" {
   export default ReactComponent;
 }
 
+declare module '*.json' {
+  const content: Record<string, string>;
+  export default content;
+}
+
+
 declare const IS_PROD: boolean;
 declare const IS_DEV: boolean;
 declare const IS_DEV_SERVER: boolean;

src/components/app/app.tsx

@@ -5,6 +5,7 @@
 import cn from 'classnames';
 import React, {Suspense, lazy} from 'react';
 
+import packageJson from '../../../package.json';
 import {stylesContainer} from './app.module.less';
 import {stylesHeader, stylesImage, stylesLink} from './app.module.scss';
 
@@ -21,7 +22,7 @@ export const App = (): React.ReactElement => (
                 href="https://github.com/glook/webpack-typescript-react"
                 target="_blank"
             >
-                @glook/webpack-typescript-react
+                @glook/webpack-typescript-react ({packageJson.version})
             </a>
         </div>
     </div>

src/index.html

@@ -2,9 +2,15 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.5, minimum-scale=0.9, user-scalable=yes"
+        />
         <title>Webpack5 typescript react boilerplate</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
-            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;400&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"
             rel="stylesheet"
         />
     </head>

src/index.tsx

@@ -1,3 +1,4 @@
+import '@styles/styles.css';
 /**
  * Created by: Andrey Polyakov (andrey@polyakov.im)
  */

src/styles/styles.css

@@ -0,0 +1,3 @@
+#root {
+    background: #fff;
+}

webpack/base.js

@@ -3,7 +3,7 @@
  */
 import path from 'path';
 
-import {aliasItems, devServerUrl, externalItems} from './config';
+import {aliasItems, externalItems} from './config';
 import entry from './entry';
 import optimization from './optimization';
 import * as plugins from './plugins';
@@ -18,7 +18,7 @@ export default {
     entry,
     output: {
         path: path.join(__dirname, '../dist'),
-        publicPath: isDevServer ? devServerUrl : './',
+        publicPath: isDevServer ? undefined : './',
         filename: isDevServer
             ? '[name].[fullhash].js'
             : '[name].[contenthash].js',

webpack/config/devServer.js

@@ -3,20 +3,15 @@
  * @see https://webpack.js.org/configuration/dev-server/
  */
 
-import {defaultPort, devServerHost} from '../utils/env';
 import {devServerProxyConfig} from './devServierProxy';
 
-export const devServerUrl = `http://${devServerHost}:${defaultPort}/`;
-
 export const devServerConfig = {
     client: {
         overlay: false,
     },
     headers: {'Access-Control-Allow-Origin': '*'},
     historyApiFallback: true,
-    host: devServerHost,
     hot: true,
-    port: defaultPort,
     proxy: devServerProxyConfig,
     static: {
         publicPath: '/',

webpack/config/devServierProxy.js

@@ -15,6 +15,8 @@ const httpsProxyTarget = {
 };
 
 export const devServerProxyConfig = {
+    /*
+    // Example proxy configuration endpoins
     '/world-time': {
         target: `${httpsProxyTarget.protocol}://worldtimeapi.org:${httpsProxyTarget.port}`,
         pathRewrite: pathRewrite('^/world-time/test', '/api'),
@@ -27,4 +29,5 @@ export const devServerProxyConfig = {
         changeOrigin: true,
         secure: false,
     },
+    */
 };

webpack/rules/styles.js

@@ -16,7 +16,7 @@ import {
 /** css **/
 export const cssRule = {
     test: /\.css$/,
-    use: [miniCssExtractLoader, postCssLoader, resolveUrlLoader, cssLoader],
+    use: [miniCssExtractLoader, cssLoader, postCssLoader],
 };
 
 /** less **/