Skip to content

Commit ac41ab9

Browse files
glookglook
committed
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
1 parent 82abca4 commit ac41ab9

28 files changed

+273
-157
lines changed

‎.importSortPrefixrc

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"groupings": [
3+
"@src",
4+
[
5+
"@components"
6+
],
7+
[
8+
"@images",
9+
"@styles"
10+
]
11+
]
12+
}

‎.lintstagedrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"*.{js,jsx,ts,tsx,md,html,css}": "prettier --write"
3+
}

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.d.ts

‎README.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Webpack 4 boilerplate
2+
3+
![](https://habrastorage.org/webt/q-/lv/b0/q-lvb0d4li7cpi-hsctistlzooi.png)
4+
5+
[Webpack 4](https://webpack.js.org/) boilerplate with support of most common loaders and modules:
6+
7+
- [babel](https://babeljs.io/)
8+
- typescript (using [ForkTsCheckerWebpack](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin) )
9+
- sass, less, [css modules](https://github.com/css-modules/css-modules) with automatic typescript declaration
10+
- with react support (also with [react-refresh](https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin))
11+
- [esLint](https://www.npmjs.com/package/eslint)
12+
- [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))
13+
- [webpack dev server](https://webpack.js.org/configuration/dev-server/) ([proxy](https://webpack.js.org/configuration/dev-server/#devserverproxy) support is also available)
14+
- importing svg as react components using [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack)
15+
- postcss loader (with [autoprefixer](https://www.npmjs.com/package/autoprefixer) and [cssnano](https://www.npmjs.com/package/cssnano))
16+
- [husky](https://www.npmjs.com/package/husky) prehooks and [lint-staged](https://www.npmjs.com/package/lint-staged)
17+
18+
## Quick start
19+
20+
To run this locally:
21+
22+
1. run `git clone https://github.com/glook/webpack-typescript-react.git sample-project`
23+
2. Install all dependencies using `yarn` or `npm install`
24+
3. Start the development server using `yarn start` or `npm run start`
25+
4. Open up [http://localhost:8080](http://localhost:8080)

‎package.json

+105-88
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,107 @@
11
{
2-
"name": "webpack4-es6-sass",
3-
"version": "0.0.4",
4-
"description": "",
5-
"main": "index.js",
6-
"scripts": {
7-
"start": "webpack-dev-server --env.mode dev --env.isDevServer true",
8-
"build": "webpack --env.mode production"
9-
},
10-
"author": "",
11-
"license": "ISC",
12-
"devDependencies": {
13-
"@babel/core": "^7.10.2",
14-
"@babel/plugin-proposal-class-properties": "^7.10.1",
15-
"@babel/plugin-proposal-export-namespace-from": "^7.10.1",
16-
"@babel/plugin-proposal-object-rest-spread": "^7.10.1",
17-
"@babel/plugin-proposal-throw-expressions": "^7.10.1",
18-
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
19-
"@babel/plugin-transform-runtime": "^7.10.1",
20-
"@babel/preset-env": "^7.10.2",
21-
"@babel/preset-react": "^7.10.1",
22-
"@babel/register": "^7.10.1",
23-
"@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
24-
"@svgr/webpack": "^5.4.0",
25-
"@teamsupercell/typings-for-css-modules-loader": "^2.2.0",
26-
"@typescript-eslint/eslint-plugin": "^3.2.0",
27-
"@typescript-eslint/parser": "^3.2.0",
28-
"autoprefixer": "^9.8.0",
29-
"babel-eslint": "^10.1.0",
30-
"babel-loader": "^8.1.0",
31-
"clean-webpack-plugin": "^3.0.0",
32-
"copy-webpack-plugin": "^6.0.2",
33-
"core-js": "^3.6.5",
34-
"css-loader": "3.5.3",
35-
"cssnano": "^4.1.10",
36-
"eslint": "^7.2.0",
37-
"eslint-config-airbnb-base": "^14.1.0",
38-
"eslint-config-airbnb-typescript": "^8.0.2",
39-
"eslint-config-prettier": "^6.11.0",
40-
"eslint-import-resolver-alias": "^1.1.2",
41-
"eslint-loader": "^4.0.2",
42-
"eslint-plugin-import": "^2.21.1",
43-
"eslint-plugin-jsx-a11y": "^6.2.3",
44-
"eslint-plugin-react": "^7.20.0",
45-
"eslint-plugin-react-hooks": "^2.5.1",
46-
"expose-loader": "0.7.5",
47-
"extract-text-webpack-plugin": "^4.0.0-beta.0",
48-
"file-loader": "6.0.0",
49-
"fork-ts-checker-webpack-plugin": "^4.1.6",
50-
"html-loader": "^1.1.0",
51-
"html-webpack-plugin": "^4.3.0",
52-
"is-windows": "^1.0.2",
53-
"less": "^3.11.3",
54-
"less-loader": "^6.1.0",
55-
"lodash": "^4.17.15",
56-
"mini-css-extract-plugin": "^0.9.0",
57-
"node-sass": "4.14.1",
58-
"path": "^0.12.7",
59-
"postcss-loader": "3.0.0",
60-
"prettier": "^2.0.5",
61-
"react-refresh": "^0.8.3",
62-
"regenerator-runtime": "^0.13.5",
63-
"resolve-url-loader": "3.1.1",
64-
"sass-loader": "^8.0.2",
65-
"sass-resources-loader": "^2.0.3",
66-
"style-loader": "1.2.1",
67-
"svg-url-loader": "^6.0.0",
68-
"terser-webpack-plugin": "^3.0.3",
69-
"thread-loader": "^2.1.3",
70-
"ts-loader": "^7.0.5",
71-
"typescript": "^3.9.5",
72-
"url-loader": "4.1.0",
73-
"webpack": "^4.43.0",
74-
"webpack-cli": "^3.3.11",
75-
"webpack-dev-server": "^3.11.0",
76-
"webpack-merge": "4.2.2",
77-
"webpack-serve": "^3.2.0",
78-
"webpack-stats-plugin": "0.3.1",
79-
"yargs": "^15.3.1"
80-
},
81-
"dependencies": {
82-
"@types/classnames": "^2.2.10",
83-
"@types/react": "^16.9.35",
84-
"@types/react-dom": "^16.9.8",
85-
"classnames": "^2.2.6",
86-
"normalize.css": "^8.0.1",
87-
"react": "^16.13.1",
88-
"react-dom": "^16.13.1"
89-
}
2+
"name": "webpack-typescript-react",
3+
"version": "0.0.5",
4+
"description": "",
5+
"license": "ISC",
6+
"author": "",
7+
"main": "index.js",
8+
"scripts": {
9+
"build": "webpack --env.mode production",
10+
"start": "webpack-dev-server --env.mode dev --env.isDevServer true"
11+
},
12+
"husky": {
13+
"hooks": {
14+
"pre-commit": "lint-staged",
15+
"post-commit": "git update-index --again"
16+
}
17+
},
18+
"dependencies": {
19+
"@types/classnames": "^2.2.10",
20+
"@types/react": "^16.9.45",
21+
"@types/react-dom": "^16.9.8",
22+
"classnames": "^2.2.6",
23+
"normalize.css": "^8.0.1",
24+
"react": "^16.13.1",
25+
"react-dom": "^16.13.1"
26+
},
27+
"devDependencies": {
28+
"@babel/core": "^7.11.1",
29+
"@babel/plugin-proposal-class-properties": "^7.10.4",
30+
"@babel/plugin-proposal-export-namespace-from": "^7.10.4",
31+
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
32+
"@babel/plugin-proposal-throw-expressions": "^7.10.4",
33+
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
34+
"@babel/plugin-transform-runtime": "^7.11.0",
35+
"@babel/preset-env": "^7.11.0",
36+
"@babel/preset-react": "^7.10.4",
37+
"@babel/register": "^7.10.5",
38+
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
39+
"@svgr/webpack": "^5.4.0",
40+
"@teamsupercell/typings-for-css-modules-loader": "^2.2.1",
41+
"@typescript-eslint/eslint-plugin": "^3.8.0",
42+
"@typescript-eslint/parser": "^3.8.0",
43+
"autoprefixer": "^9.8.6",
44+
"babel-eslint": "^10.1.0",
45+
"babel-loader": "^8.1.0",
46+
"clean-webpack-plugin": "^3.0.0",
47+
"copy-webpack-plugin": "^6.0.3",
48+
"core-js": "^3.6.5",
49+
"css-loader": "4.2.1",
50+
"cssnano": "^4.1.10",
51+
"eslint": "^7.6.0",
52+
"eslint-config-airbnb-base": "^14.2.0",
53+
"eslint-config-airbnb-typescript": "^9.0.0",
54+
"eslint-config-prettier": "^6.11.0",
55+
"eslint-import-resolver-alias": "^1.1.2",
56+
"eslint-loader": "^4.0.2",
57+
"eslint-plugin-import": "^2.22.0",
58+
"eslint-plugin-jsx-a11y": "^6.3.1",
59+
"eslint-plugin-react": "^7.20.5",
60+
"eslint-plugin-react-hooks": "^4.0.8",
61+
"expose-loader": "1.0.0",
62+
"extract-text-webpack-plugin": "^4.0.0-beta.0",
63+
"file-loader": "6.0.0",
64+
"fork-ts-checker-webpack-plugin": "^5.0.14",
65+
"html-loader": "^1.1.0",
66+
"html-webpack-plugin": "^4.3.0",
67+
"husky": "^4.2.5",
68+
"import-sort-style-module-and-prefix": "^0.1.3",
69+
"is-windows": "^1.0.2",
70+
"less": "^3.12.2",
71+
"less-loader": "^6.2.0",
72+
"lint-staged": "^10.2.11",
73+
"lodash": "^4.17.19",
74+
"mini-css-extract-plugin": "^0.9.0",
75+
"node-sass": "4.14.1",
76+
"path": "^0.12.7",
77+
"postcss-loader": "3.0.0",
78+
"prettier": "^2.0.5",
79+
"prettier-plugin-import-sort": "0.0.4",
80+
"pretty-quick": "^2.0.1",
81+
"react-refresh": "^0.8.3",
82+
"regenerator-runtime": "^0.13.7",
83+
"resolve-url-loader": "3.1.1",
84+
"sass-loader": "^9.0.3",
85+
"sass-resources-loader": "^2.0.3",
86+
"style-loader": "1.2.1",
87+
"svg-url-loader": "^6.0.0",
88+
"terser-webpack-plugin": "^4.0.0",
89+
"thread-loader": "^2.1.3",
90+
"ts-loader": "^8.0.2",
91+
"typescript": "^3.9.7",
92+
"url-loader": "4.1.0",
93+
"webpack": "^4.44.1",
94+
"webpack-cli": "^3.3.12",
95+
"webpack-dev-server": "^3.11.0",
96+
"webpack-merge": "5.1.1",
97+
"webpack-serve": "^3.2.0",
98+
"webpack-stats-plugin": "0.3.2",
99+
"yargs": "^15.4.1"
100+
},
101+
"importSort": {
102+
".js, .jsx, .ts, .tsx": {
103+
"style": "module-and-prefix",
104+
"parser": "typescript"
105+
}
106+
}
90107
}

‎src/@types/declarations.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ declare module '*.scss' {
33
export = content;
44
}
55

6+
declare module '*.less' {
7+
const content: { [className: string]: string };
8+
export = content;
9+
}
10+
611
declare module '*.component.svg' {
712
const content: any;
813
export default content;

‎src/components/app/app.module.less

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.styles {
2+
&-container {
3+
width: 100%;
4+
height: 100%;
5+
position: absolute;
6+
background: hsl(232, 47%, 52%);
7+
display: flex;
8+
flex-direction: column;
9+
align-content: center;
10+
align-items: center;
11+
justify-content: center;
12+
}
13+
}

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// autogenerated by typings-for-css-modules-loader.
2+
// Please do not change this file!
3+
declare namespace AppModuleLessNamespace {
4+
export interface IAppModuleLess {
5+
file: string;
6+
mappings: string;
7+
names: string;
8+
sources: string;
9+
sourcesContent: string;
10+
stylesContainer: string;
11+
version: string;
12+
}
13+
}
14+
15+
declare const AppModuleLessModule: AppModuleLessNamespace.IAppModuleLess & {
16+
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
17+
locals: AppModuleLessNamespace.IAppModuleLess;
18+
};
19+
20+
export = AppModuleLessModule;

‎src/components/app/app.module.scss

-12
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,4 @@
11
.styles {
2-
&-container {
3-
width: 100%;
4-
height: 100%;
5-
position: absolute;
6-
background: hsl(217, 47%, 52%);
7-
display: flex;
8-
flex-direction: column;
9-
align-content: center;
10-
align-items: center;
11-
justify-content: center;
12-
}
13-
142
&-header {
153
font-size: 50px;
164
color: #fff;

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,14 @@
22
// Please do not change this file!
33
declare namespace AppModuleScssNamespace {
44
export interface IAppModuleScss {
5-
stylesContainer: string;
5+
file: string;
6+
mappings: string;
7+
names: string;
8+
sources: string;
9+
sourcesContent: string;
610
stylesHeader: string;
711
stylesImage: string;
12+
version: string;
813
}
914
}
1015

‎src/components/app/app.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
/**
22
* Created by: Andrey Polyakov ([email protected])
33
*/
4-
import React, {lazy, Suspense} from 'react';
5-
import {stylesContainer, stylesHeader, stylesImage} from './app.module.scss';
4+
import React, {Suspense, lazy} from 'react';
5+
6+
import {stylesContainer} from './app.module.less';
7+
import {stylesHeader, stylesImage} from './app.module.scss';
68

79
const LazyStrawberryIcon = lazy(() => import('./strawberry'));
810
export const App = (): React.ReactElement => (

‎src/components/app/strawberry.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* Created by: Andrey Polyakov ([email protected])
33
*/
44
import React, {CSSProperties} from 'react';
5+
56
import StrawberryIcon from '@images/strawberry.component.svg';
67

78
export default ({

‎src/index.html

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Webpack es6 typescript</title>
6-
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
7-
</head>
8-
<body>
9-
<div id="root">Some base container message</div>
10-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Webpack es6 typescript</title>
6+
<link
7+
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap"
8+
rel="stylesheet"
9+
/>
10+
</head>
11+
<body>
12+
<div id="root">Some base container message</div>
13+
</body>
1114
</html>

‎src/index.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@
33
*/
44
import 'core-js/stable';
55
import 'regenerator-runtime/runtime';
6+
7+
import '@styles/styles.less';
8+
import '@styles/styles.scss';
9+
610
import React from 'react';
711
import ReactDom from 'react-dom';
8-
import {App} from './components/app/app';
9-
import '@styles/styles.scss';
12+
13+
import {App} from '@components/app/app';
1014

1115
ReactDom.render(<App />, document.getElementById('root'));

‎src/styles/styles.less

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#root {
2+
background: #fff;
3+
}

‎tsconfig.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@
1616
"rootDir": "./",
1717
"typeRoots": ["./node_modules/@types", "./src/@types"],
1818
"paths": {
19-
"@src/*": ["src/*"]
19+
"@src/*": ["src/*"],
20+
"@images/*": ["src/images/*"],
21+
"@styles/*": ["src/styles/*"],
22+
"@components/*": ["src/components/*"]
2023
},
2124
"allowSyntheticDefaultImports": true,
2225
"esModuleInterop": true

0 commit comments

Comments
 (0)