0.0.5

* added prettier-plugin-import-sort
* fixed less-loader config
* added new aliases to webpack config
* updated dependencies to latest version
* added lint-staged, husky
* added import sort config
* added README.md

.importSortPrefixrc

@@ -0,0 +1,12 @@
+{
+  "groupings": [
+    "@src",
+    [
+      "@components"
+    ],
+    [
+      "@images",
+      "@styles"
+    ]
+  ]
+}

.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write"
+}

.prettierignore

@@ -0,0 +1 @@
+*.d.ts

README.md

@@ -0,0 +1,25 @@
+# Webpack 4 boilerplate
+
+![](https://habrastorage.org/webt/q-/lv/b0/q-lvb0d4li7cpi-hsctistlzooi.png)
+
+[Webpack 4](https://webpack.js.org/) boilerplate with support of most common loaders and modules:
+
+-   [babel](https://babeljs.io/)
+-   typescript (using [ForkTsCheckerWebpack](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin) )
+-   sass, less, [css modules](https://github.com/css-modules/css-modules) with automatic typescript declaration
+-   with react support (also with [react-refresh](https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin))
+-   [esLint](https://www.npmjs.com/package/eslint)
+-   [prettier](https://www.npmjs.com/package/prettier) (with import sorting using [prettier-plugin-import-sort](https://www.npmjs.com/package/prettier-plugin-import-sort), [import-sort-style-module-and-prefix](https://www.npmjs.com/package/import-sort-style-module-and-prefix))
+-   [webpack dev server](https://webpack.js.org/configuration/dev-server/) ([proxy](https://webpack.js.org/configuration/dev-server/#devserverproxy) support is also available)
+-   importing svg as react components using [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack)
+-   postcss loader (with [autoprefixer](https://www.npmjs.com/package/autoprefixer) and [cssnano](https://www.npmjs.com/package/cssnano))
+-   [husky](https://www.npmjs.com/package/husky) prehooks and [lint-staged](https://www.npmjs.com/package/lint-staged)
+
+## Quick start
+
+To run this locally:
+
+1. run `git clone https://github.com/glook/webpack-typescript-react.git sample-project`
+2. Install all dependencies using `yarn` or `npm install`
+3. Start the development server using `yarn start` or `npm run start`
+4. Open up [http://localhost:8080](http://localhost:8080)

package.json

@@ -1,90 +1,107 @@
 {
-  "name": "webpack4-es6-sass",
-  "version": "0.0.4",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "start": "webpack-dev-server --env.mode dev --env.isDevServer true",
-    "build": "webpack --env.mode production"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/core": "^7.10.2",
-    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/plugin-proposal-export-namespace-from": "^7.10.1",
-    "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
-    "@babel/plugin-proposal-throw-expressions": "^7.10.1",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.10.1",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-react": "^7.10.1",
-    "@babel/register": "^7.10.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
-    "@svgr/webpack": "^5.4.0",
-    "@teamsupercell/typings-for-css-modules-loader": "^2.2.0",
-    "@typescript-eslint/eslint-plugin": "^3.2.0",
-    "@typescript-eslint/parser": "^3.2.0",
-    "autoprefixer": "^9.8.0",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.0.2",
-    "core-js": "^3.6.5",
-    "css-loader": "3.5.3",
-    "cssnano": "^4.1.10",
-    "eslint": "^7.2.0",
-    "eslint-config-airbnb-base": "^14.1.0",
-    "eslint-config-airbnb-typescript": "^8.0.2",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": "^2.21.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "expose-loader": "0.7.5",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "6.0.0",
-    "fork-ts-checker-webpack-plugin": "^4.1.6",
-    "html-loader": "^1.1.0",
-    "html-webpack-plugin": "^4.3.0",
-    "is-windows": "^1.0.2",
-    "less": "^3.11.3",
-    "less-loader": "^6.1.0",
-    "lodash": "^4.17.15",
-    "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "4.14.1",
-    "path": "^0.12.7",
-    "postcss-loader": "3.0.0",
-    "prettier": "^2.0.5",
-    "react-refresh": "^0.8.3",
-    "regenerator-runtime": "^0.13.5",
-    "resolve-url-loader": "3.1.1",
-    "sass-loader": "^8.0.2",
-    "sass-resources-loader": "^2.0.3",
-    "style-loader": "1.2.1",
-    "svg-url-loader": "^6.0.0",
-    "terser-webpack-plugin": "^3.0.3",
-    "thread-loader": "^2.1.3",
-    "ts-loader": "^7.0.5",
-    "typescript": "^3.9.5",
-    "url-loader": "4.1.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "4.2.2",
-    "webpack-serve": "^3.2.0",
-    "webpack-stats-plugin": "0.3.1",
-    "yargs": "^15.3.1"
-  },
-  "dependencies": {
-    "@types/classnames": "^2.2.10",
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
-    "classnames": "^2.2.6",
-    "normalize.css": "^8.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
-  }
+    "name": "webpack-typescript-react",
+    "version": "0.0.5",
+    "description": "",
+    "license": "ISC",
+    "author": "",
+    "main": "index.js",
+    "scripts": {
+        "build": "webpack --env.mode production",
+        "start": "webpack-dev-server --env.mode dev --env.isDevServer true"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged",
+            "post-commit": "git update-index --again"
+        }
+    },
+    "dependencies": {
+        "@types/classnames": "^2.2.10",
+        "@types/react": "^16.9.45",
+        "@types/react-dom": "^16.9.8",
+        "classnames": "^2.2.6",
+        "normalize.css": "^8.0.1",
+        "react": "^16.13.1",
+        "react-dom": "^16.13.1"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.11.1",
+        "@babel/plugin-proposal-class-properties": "^7.10.4",
+        "@babel/plugin-proposal-export-namespace-from": "^7.10.4",
+        "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+        "@babel/plugin-proposal-throw-expressions": "^7.10.4",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-runtime": "^7.11.0",
+        "@babel/preset-env": "^7.11.0",
+        "@babel/preset-react": "^7.10.4",
+        "@babel/register": "^7.10.5",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
+        "@svgr/webpack": "^5.4.0",
+        "@teamsupercell/typings-for-css-modules-loader": "^2.2.1",
+        "@typescript-eslint/eslint-plugin": "^3.8.0",
+        "@typescript-eslint/parser": "^3.8.0",
+        "autoprefixer": "^9.8.6",
+        "babel-eslint": "^10.1.0",
+        "babel-loader": "^8.1.0",
+        "clean-webpack-plugin": "^3.0.0",
+        "copy-webpack-plugin": "^6.0.3",
+        "core-js": "^3.6.5",
+        "css-loader": "4.2.1",
+        "cssnano": "^4.1.10",
+        "eslint": "^7.6.0",
+        "eslint-config-airbnb-base": "^14.2.0",
+        "eslint-config-airbnb-typescript": "^9.0.0",
+        "eslint-config-prettier": "^6.11.0",
+        "eslint-import-resolver-alias": "^1.1.2",
+        "eslint-loader": "^4.0.2",
+        "eslint-plugin-import": "^2.22.0",
+        "eslint-plugin-jsx-a11y": "^6.3.1",
+        "eslint-plugin-react": "^7.20.5",
+        "eslint-plugin-react-hooks": "^4.0.8",
+        "expose-loader": "1.0.0",
+        "extract-text-webpack-plugin": "^4.0.0-beta.0",
+        "file-loader": "6.0.0",
+        "fork-ts-checker-webpack-plugin": "^5.0.14",
+        "html-loader": "^1.1.0",
+        "html-webpack-plugin": "^4.3.0",
+        "husky": "^4.2.5",
+        "import-sort-style-module-and-prefix": "^0.1.3",
+        "is-windows": "^1.0.2",
+        "less": "^3.12.2",
+        "less-loader": "^6.2.0",
+        "lint-staged": "^10.2.11",
+        "lodash": "^4.17.19",
+        "mini-css-extract-plugin": "^0.9.0",
+        "node-sass": "4.14.1",
+        "path": "^0.12.7",
+        "postcss-loader": "3.0.0",
+        "prettier": "^2.0.5",
+        "prettier-plugin-import-sort": "0.0.4",
+        "pretty-quick": "^2.0.1",
+        "react-refresh": "^0.8.3",
+        "regenerator-runtime": "^0.13.7",
+        "resolve-url-loader": "3.1.1",
+        "sass-loader": "^9.0.3",
+        "sass-resources-loader": "^2.0.3",
+        "style-loader": "1.2.1",
+        "svg-url-loader": "^6.0.0",
+        "terser-webpack-plugin": "^4.0.0",
+        "thread-loader": "^2.1.3",
+        "ts-loader": "^8.0.2",
+        "typescript": "^3.9.7",
+        "url-loader": "4.1.0",
+        "webpack": "^4.44.1",
+        "webpack-cli": "^3.3.12",
+        "webpack-dev-server": "^3.11.0",
+        "webpack-merge": "5.1.1",
+        "webpack-serve": "^3.2.0",
+        "webpack-stats-plugin": "0.3.2",
+        "yargs": "^15.4.1"
+    },
+    "importSort": {
+        ".js, .jsx, .ts, .tsx": {
+            "style": "module-and-prefix",
+            "parser": "typescript"
+        }
+    }
 }

src/@types/declarations.d.ts

@@ -3,6 +3,11 @@ declare module '*.scss' {
     export = content;
 }
 
+declare module '*.less' {
+    const content: { [className: string]: string };
+    export = content;
+}
+
 declare module '*.component.svg' {
     const content: any;
     export default content;

src/components/app/app.module.less

@@ -0,0 +1,13 @@
+.styles {
+    &-container {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background: hsl(232, 47%, 52%);
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        align-items: center;
+        justify-content: center;
+    }
+}

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

@@ -0,0 +1,20 @@
+// autogenerated by typings-for-css-modules-loader.
+// Please do not change this file!
+declare namespace AppModuleLessNamespace {
+    export interface IAppModuleLess {
+        file: string;
+        mappings: string;
+        names: string;
+        sources: string;
+        sourcesContent: string;
+        stylesContainer: string;
+        version: string;
+    }
+}
+
+declare const AppModuleLessModule: AppModuleLessNamespace.IAppModuleLess & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: AppModuleLessNamespace.IAppModuleLess;
+};
+
+export = AppModuleLessModule;

src/components/app/app.module.scss

@@ -1,16 +1,4 @@
 .styles {
-    &-container {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        background: hsl(217, 47%, 52%);
-        display: flex;
-        flex-direction: column;
-        align-content: center;
-        align-items: center;
-        justify-content: center;
-    }
-
     &-header {
         font-size: 50px;
         color: #fff;

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

@@ -2,9 +2,14 @@
 // Please do not change this file!
 declare namespace AppModuleScssNamespace {
     export interface IAppModuleScss {
-        stylesContainer: string;
+        file: string;
+        mappings: string;
+        names: string;
+        sources: string;
+        sourcesContent: string;
         stylesHeader: string;
         stylesImage: string;
+        version: string;
     }
 }
 

src/components/app/app.tsx

@@ -1,8 +1,10 @@
 /**
  * Created by: Andrey Polyakov ([email protected])
  */
-import React, {lazy, Suspense} from 'react';
-import {stylesContainer, stylesHeader, stylesImage} from './app.module.scss';
+import React, {Suspense, lazy} from 'react';
+
+import {stylesContainer} from './app.module.less';
+import {stylesHeader, stylesImage} from './app.module.scss';
 
 const LazyStrawberryIcon = lazy(() => import('./strawberry'));
 export const App = (): React.ReactElement => (

src/components/app/strawberry.tsx

@@ -2,6 +2,7 @@
  * Created by: Andrey Polyakov ([email protected])
  */
 import React, {CSSProperties} from 'react';
+
 import StrawberryIcon from '@images/strawberry.component.svg';
 
 export default ({

src/index.html

@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Webpack es6 typescript</title>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
-</head>
-<body>
-<div id="root">Some base container message</div>
-</body>
+    <head>
+        <meta charset="UTF-8" />
+        <title>Webpack es6 typescript</title>
+        <link
+            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap"
+            rel="stylesheet"
+        />
+    </head>
+    <body>
+        <div id="root">Some base container message</div>
+    </body>
 </html>

src/index.tsx

@@ -3,9 +3,13 @@
  */
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
+
+import '@styles/styles.less';
+import '@styles/styles.scss';
+
 import React from 'react';
 import ReactDom from 'react-dom';
-import {App} from './components/app/app';
-import '@styles/styles.scss';
+
+import {App} from '@components/app/app';
 
 ReactDom.render(<App />, document.getElementById('root'));

src/styles/styles.less

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

tsconfig.json

@@ -16,7 +16,10 @@
         "rootDir": "./",
         "typeRoots": ["./node_modules/@types", "./src/@types"],
         "paths": {
-            "@src/*": ["src/*"]
+            "@src/*": ["src/*"],
+            "@images/*": ["src/images/*"],
+            "@styles/*": ["src/styles/*"],
+            "@components/*": ["src/components/*"]
         },
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true