DiegoTeles/react-base-webpack-config-ts

React v17.0.2 with TypeScript

Template Reactjs with typescript

React v17.0.2 with TypeScript

In this project we have basic settings to work with Typescript, Babel, images, CSS, SASS and Fast Refresh to avoid unnecessary state changes.

Used libs

For cross platform environment variable

• cross-env

Loaders for webpack rules

• babel-loader
• css-loader
• file-loader
• sass-loader
• url-loader

SASS

• node-sass

Image Optimizers

• imagemin-gifsicle
• imagemin-jpegtran
• imagemin-mozjpeg
• imagemin-optipng
• imagemin-pngquant
• imagemin-svgo
• image-minimizer-webpack-plugin

Inject bundle

• html-webpack-plugin

Fast refresh components

• @pmmmwh/react-refresh-webpack-plugin

Babel preset

• @babel/preset-env
• @babel/preset-typescript
• @babel/preset-react

Babel config

//babel.config.js
module.exports = {
  presets: [
    "@babel/preset-env", //that allows you to use the latest JavaScript without needing to micromanage which syntax transforms
    "@babel/preset-typescript", // that allows you to use Typescript
    [
      "@babel/preset-react",
      {
        runtime: "automatic", // react refresh automatic. Default is classic
      },
    ],
  ],
};