How to create a React application with Webpack - TypeScript Version

In this article, let's create a React template project, it involves ReactJS, TypeScript, Webpack.

https://github.com/markliu2013/react-template-ts

Create a folder and initialize NPM

npm init -y

Install React

npm i react react-dom

Install Webpack

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

Install TypeScript

npm i -D typescript ts-loader @types/node @types/react @types/react-dom

Create src folder and index.html, App.tsx, index.ts

Create file webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.join(__dirname, '/dist'), // the bundle output path
    filename: 'main.js' // the name of the bundle
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html' // to import index.html file inside index.js
    })
  ],
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css']
  },
  devServer: {
    port: 3035 // you can change the port
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/, // .js and .jsx files
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader'
        }
      }
    ]
  }
};

Create file tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "allowJs": true,
    "target": "ES6",
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "paths": {
      "*": ["node_modules/*"],
      "@assets/*": ["./assets/*"],
      "@src/*": ["./src/*"]
    }
  },
  "include": ["src/**/*", "tools/**/*"]
}

Add script in package.json

"build": "webpack --mode production"
"dev": "webpack serve --mode development",

Run Project

npm run dev
npm run build

We use ts-loader in the project now, it can be changed to babel-loader instead.

Install babel-loader

npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.join(__dirname, '/dist'), // the bundle output path
    filename: 'main.js' // the name of the bundle
  },
  resolve: {
    modules: [__dirname, 'src', 'node_modules'],
    extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html' // to import index.html file inside index.js
    })
  ],
  devServer: {
    port: 3035 // you can change the port
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)x?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

tsconfig.js

{
  "compilerOptions": {
    // Emit Configuration
    "noEmit": true,

    // Type Checking Configuration
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "exactOptionalPropertyTypes": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitThis": true,
    "noPropertyAccessFromIndexSignature": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitOverride": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    // Strict Rules - v4.8
    "alwaysStrict": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "useUnknownInCatchVariables": true,

    // Modules Configuration
    "baseUrl": "./",
    "module": "ES2022",
    "moduleResolution": "node",

    // Language and Environment Configuration
    "target": "ES2022",
    "jsx": "react-jsx",

    // JavaScript Support Configuration
    "allowJs": true,
    "checkJs": true,

    // Interop Constraints Configuration
    "esModuleInterop": true,
    "isolatedModules": true
  },
  "include": ["src/**/**/*"],
  "exclude": ["node_modules"]
}

Create file babel.config.json

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "@babel/preset-typescript"
  ]
}

Next Step, Setup Eslint and Prettier

https://dev.to/markliu2013/setup-eslint-and-prettier-in-react-3h99