How to set up a complete React JS project from scratch. Using Webpack and Babel. I also show you how to add additional useful loaders such as file-loaders to import images, scss loaders to use scss and compile it into scss. I also show you how to make builds for multiple environment with environment variables.

Regex used in video:

/\.(js|jsx)$/
/\.html$/
/\.(png|jpe?g|gif)$/i
/\.s[ac]ss$/i
/\.(js|jsx|ts|tsx)$/

tsconfig.json file:
{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": false,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react",
    "removeComments": true
  }
}

Github repo: https://github.com/daryanka/webpack-babel-tutorial

#react #webpack #babel #javascript #developer