The Complete Webpack ReactJS FastRefresh setup

I proudly completed the minimum setup for ReactJS. ESLint, Webpack, FastRefresh, Babel, TypeScript, Prettier, ESLint, Husky, Lint Staged, etc. I did it under two hours. What an achievement.

code splitting repository, reactjs webpack setup, eslint, prettier, etc.

Code sample

You can find the code sample here in my GitHub repository https://github.com/srele96/code-splitting.

How I did it

I started by copy-pasting the suggested sample from the Fast Refresh repository https://github.com/pmmmwh/react-refresh-webpack-plugin.

Then I installed the whole lot of packages:

• webpack
• webpack-cli
• @babel/core
• @babel/preset-env
• @babel/preset-react
• @babel/preset-typescript
• typescript
• etc.

Then I wanted absolute paths, tsconfig.json, @babel/preset-typescript didn’t parse JSX. Extensions were missing. Everything that I set up back in October was coming back to me. Every problem was coming back.

Then I was done.

Beautiful.

This post is me expressing my hype, not a tutorial. I appreciate the reads :)

I am so happy :)