Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ac41ab9

Browse filesBrowse 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
Copy full SHA for ac41ab9
Expand file treeCollapse file tree

28 files changed

+273
-157
lines changed

‎.importSortPrefixrc

Copy file name to clipboard
+12Lines changed: 12 additions & 0 deletions
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

Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
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

Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.d.ts

‎README.md

Copy file name to clipboard
+25Lines changed: 25 additions & 0 deletions
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

Copy file name to clipboard
+105-88Lines changed: 105 additions & 88 deletions
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

Copy file name to clipboardExpand all lines: src/@types/declarations.d.ts
+5Lines changed: 5 additions & 0 deletions
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

Copy file name to clipboard
+13Lines changed: 13 additions & 0 deletions
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

Copy file name to clipboard
+20Lines changed: 20 additions & 0 deletions
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

Copy file name to clipboardExpand all lines: src/components/app/app.module.scss
-12Lines changed: 0 additions & 12 deletions
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

Copy file name to clipboardExpand all lines: src/components/app/app.module.scss.d.ts
+6-1Lines changed: 6 additions & 1 deletion
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

Copy file name to clipboardExpand all lines: src/components/app/app.tsx
+4-2Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
/**
22
* Created by: Andrey Polyakov (andrey@polyakov.im)
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

Copy file name to clipboardExpand all lines: src/components/app/strawberry.tsx
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* Created by: Andrey Polyakov (andrey@polyakov.im)
33
*/
44
import React, {CSSProperties} from 'react';
5+
56
import StrawberryIcon from '@images/strawberry.component.svg';
67

78
export default ({

‎src/index.html

Copy file name to clipboard
+11-8Lines changed: 11 additions & 8 deletions
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

Copy file name to clipboardExpand all lines: src/index.tsx
+6-2Lines changed: 6 additions & 2 deletions
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

Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#root {
2+
background: #fff;
3+
}

‎tsconfig.json

Copy file name to clipboardExpand all lines: tsconfig.json
+4-1Lines changed: 4 additions & 1 deletion
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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.