// tsconfig.js
{
  "compileOnSave": true,
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "target": "ES6",
    "strict": true,
    "outDir": "./dist",
    "module": "esnext",
    "sourceMap": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "removeComments": true
  }
}

// package.json
{
  "name": "reactelectronapp",
  "version": "1.0.0",
  "description": "my react and electron app",
  "main": "main.js",
  "scripts": {
    "build": "webpack --config webpack.config.js --mode=development",
    "start": "npm run build & electron ./dist/main.js"
  },
  "author": "sforman",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "@babel/preset-react": "^7.16.5",
    "@babel/preset-typescript": "^7.16.5",
    "@types/electron": "^1.6.10",
    "@types/node": "^17.0.2",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "electron": "^16.0.5",
    "file-loader": "^6.2.0",
    "html-loader": "^3.0.1",
    "html-webpack-plugin": "^5.5.0",
    "node-sass": "^7.0.0",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.0"
  },
  "prettier": {
    // irrelevant
  }
}

// webpack.config.json
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = [
  {
    mode: 'development',
    target: 'electron-main',
    devtool: 'inline-source-map',
    entry: __dirname + '/src/main.ts',
    output: {
      path: __dirname + '/dist',
      filename: 'main.js'
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: ['ts-loader']
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js']
    }
  },
  {
    mode: 'development',
    target: 'electron-main',
    devtool: 'inline-source-map',
    entry: __dirname + '/src/index.tsx',
    output: {
      path: __dirname + '/dist',
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.tsx$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              [
                '@babel/preset-react',
                {
                  runtime: 'automatic'
                }
              ],
              '@babel/preset-typescript'
            ]
          }
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.html$/,
          use: ['html-loader']
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          loader: 'file-loader',
          options: {
            name: 'images/[name].[ext]'
          }
        }
      ]
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: __dirname + '/src/index.html'
      })
    ],
    devServer: {
      historyApiFallback: true,
      static: __dirname + '/dist',
      hot: true
    }
  }
];