├── README.md
├── src
├── index.html
└── index.tsx
├── .babelrc
├── .gitignore
├── tsconfig.json
├── .eslintrc.json
├── package.json
├── webpack.prod.config.ts
└── webpack.dev.config.ts
/README.md:
--------------------------------------------------------------------------------
1 | # react-typescript-eslint-webpack
2 | Webpack template for a React app with TypeScript and ESLint
3 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | My app
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env",
4 | "@babel/preset-react",
5 | "@babel/preset-typescript"
6 | ],
7 | "plugins": [
8 | [
9 | "@babel/plugin-transform-runtime",
10 | {
11 | "regenerator": true
12 | }
13 | ]
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | /node_modules
3 | /.pnp
4 | .pnp.js
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 |
4 | const App = () => (
5 | My React and TypeScript App!! {new Date().toLocaleDateString()}
6 | );
7 |
8 | ReactDOM.render(
9 |
10 |
11 | ,
12 | document.getElementById("root")
13 | );
14 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "allowSyntheticDefaultImports": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "strict": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "moduleResolution": "node",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "noEmit": true,
14 | "jsx": "react"
15 | },
16 | "include": ["src"]
17 | }
18 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "@typescript-eslint/parser",
3 | "parserOptions": {
4 | "ecmaVersion": 2018,
5 | "sourceType": "module"
6 | },
7 | "plugins": ["@typescript-eslint", "react-hooks"],
8 | "extends": [
9 | "plugin:react/recommended",
10 | "plugin:@typescript-eslint/recommended"
11 | ],
12 | "rules": {
13 | "react-hooks/rules-of-hooks": "error",
14 | "react-hooks/exhaustive-deps": "warn",
15 | "react/prop-types": "off"
16 | },
17 | "settings": {
18 | "react": {
19 | "pragma": "React",
20 | "version": "detect"
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-app",
3 | "version": "0.0.1",
4 | "scripts": {
5 | "start": "webpack serve --config webpack.dev.config.ts",
6 | "build": "webpack --config webpack.prod.config.ts"
7 | },
8 | "dependencies": {
9 | "html-webpack-plugin": "^5.5.0",
10 | "react": "^17.0.1",
11 | "react-dom": "^17.0.1",
12 | "save-dev": "0.0.1-security"
13 | },
14 | "devDependencies": {
15 | "@babel/core": "^7.17.5",
16 | "@babel/plugin-transform-runtime": "^7.17.0",
17 | "@babel/preset-env": "^7.16.11",
18 | "@babel/preset-react": "^7.16.7",
19 | "@babel/preset-typescript": "^7.16.7",
20 | "@babel/runtime": "^7.17.2",
21 | "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
22 | "@types/react": "^17.0.40",
23 | "@types/react-dom": "^17.0.13",
24 | "@types/webpack-dev-server": "^4.7.2",
25 | "@typescript-eslint/eslint-plugin": "^5.14.0",
26 | "@typescript-eslint/parser": "^5.14.0",
27 | "babel-loader": "^8.2.3",
28 | "clean-webpack-plugin": "^4.0.0",
29 | "eslint": "^8.11.0",
30 | "eslint-plugin-react": "^7.29.3",
31 | "eslint-plugin-react-hooks": "^4.3.0",
32 | "eslint-webpack-plugin": "^2.4.1",
33 | "fork-ts-checker-webpack-plugin": "^7.2.1",
34 | "ts-node": "^10.7.0",
35 | "typescript": "^4.6.2",
36 | "webpack": "^5.70.0",
37 | "webpack-cli": "^4.9.2",
38 | "webpack-dev-server": "^4.7.4"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/webpack.prod.config.ts:
--------------------------------------------------------------------------------
1 | import path from "path";
2 | import { Configuration } from "webpack";
3 | import HtmlWebpackPlugin from "html-webpack-plugin";
4 | import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
5 | import ESLintPlugin from "eslint-webpack-plugin";
6 | import { CleanWebpackPlugin } from "clean-webpack-plugin";
7 |
8 | const config: Configuration = {
9 | mode: "production",
10 | entry: "./src/index.tsx",
11 | output: {
12 | path: path.resolve(__dirname, "build"),
13 | filename: "[name].[contenthash].js",
14 | publicPath: "",
15 | },
16 | module: {
17 | rules: [
18 | {
19 | test: /\.(ts|js)x?$/i,
20 | exclude: /node_modules/,
21 | use: {
22 | loader: "babel-loader",
23 | options: {
24 | presets: [
25 | "@babel/preset-env",
26 | "@babel/preset-react",
27 | "@babel/preset-typescript",
28 | ],
29 | },
30 | },
31 | },
32 | ],
33 | },
34 | resolve: {
35 | extensions: [".tsx", ".ts", ".js"],
36 | },
37 | plugins: [
38 | new HtmlWebpackPlugin({
39 | template: "src/index.html",
40 | }),
41 | new ForkTsCheckerWebpackPlugin({
42 | async: false,
43 | }),
44 | new ESLintPlugin({
45 | extensions: ["js", "jsx", "ts", "tsx"],
46 | }),
47 | new CleanWebpackPlugin(),
48 | ],
49 | };
50 |
51 | export default config;
52 |
--------------------------------------------------------------------------------
/webpack.dev.config.ts:
--------------------------------------------------------------------------------
1 | import path from "path";
2 | import { Configuration as WebpackConfiguration, HotModuleReplacementPlugin } from "webpack";
3 | import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
4 | import HtmlWebpackPlugin from "html-webpack-plugin";
5 | import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
6 | import ESLintPlugin from "eslint-webpack-plugin";
7 |
8 | interface Configuration extends WebpackConfiguration {
9 | devServer?: WebpackDevServerConfiguration;
10 | }
11 |
12 | const config: Configuration = {
13 | mode: "development",
14 | output: {
15 | publicPath: "/",
16 | },
17 | entry: "./src/index.tsx",
18 | module: {
19 | rules: [
20 | {
21 | test: /\.(ts|js)x?$/i,
22 | exclude: /node_modules/,
23 | use: {
24 | loader: "babel-loader",
25 | options: {
26 | presets: [
27 | "@babel/preset-env",
28 | "@babel/preset-react",
29 | "@babel/preset-typescript",
30 | ],
31 | },
32 | },
33 | },
34 | ],
35 | },
36 | resolve: {
37 | extensions: [".tsx", ".ts", ".js"],
38 | },
39 | plugins: [
40 | new HtmlWebpackPlugin({
41 | template: "src/index.html",
42 | }),
43 | new HotModuleReplacementPlugin(),
44 | new ForkTsCheckerWebpackPlugin({
45 | async: false,
46 | }),
47 | new ESLintPlugin({
48 | extensions: ["js", "jsx", "ts", "tsx"],
49 | }),
50 | ],
51 | devtool: "inline-source-map",
52 | devServer: {
53 | static: path.join(__dirname, "build"),
54 | historyApiFallback: true,
55 | port: 4000,
56 | open: true,
57 | hot: true,
58 | },
59 | };
60 |
61 | export default config;
62 |
--------------------------------------------------------------------------------