Custom React Typescript Webpack 5 Config

Hello medium! I have looked long and far for what is the optimum react Webpack config but had some trouble finding it. I hope this article served you well with information needed to not only setup your Webpack config but also understand how this black box works. Trust me when I first started learning Webpack it sounded like magic, but overtime I have come to understand it and can share my knowledge with everyone! :D

As usual the link to my YouTube video where you can follow along is below if you prefer it that way :D

Okay I am going to break this article up into various parts:

1. Setting up Webpack & Babel & React.
2. Setting up Typescript and type checking with React.

1. Setting up Webpack & Babel

Okay so if you don’t know already, webpack is a tool that can’t solely take our javascript and transpile it into code that will work on most modern browsers. It takes help from plugins and loaders to do that. This is where babel-loader comes in. Lets first initialize our node application

yarn init -y
yarn add --dev webpack webpack-cli webpack-dev-server

This will set us up with everything Webpack related. We need the main webpack, webpack-cli (for command line instructions) and webpack-dev-server(to setup a server to serve your application on a port)

Now lets get in some babel to help up transpile our modern js code to code that most browsers can run

yarn add --dev @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin react react-dom

This will set us up for taking our code and transpiling it to what can run in our browsers. @babel/core is the main piece, @babel/preset-env will turn our js to cross browser code, @babel/preset-react will turn our react/jsx code to regular JavaScript, babel-loader for orchestrating transpiling and html-webpack-plugin to help create our index.html page that will run our app.
react and react-dom is self explanatory, like how else are we going to write react?

Now lets create two files webpack.config.js and .babelrc:

webpack.config.js

.babelrc

The main thing I want you to focus on is inside module -> rules. This is where we use babel-loader to parse all our files that end with either .js or .jsx, babel-loader will look for a .babelrc file and run those presets on all matching files found by the test.

folder structure

Your folder structure should look something like this, please create a src directory and a public/index.html and index.jsx

index.html

index.jsx

If you’ve used create-react-app(which I highly recommend before having your own custom config) this should look familiar to you. If this doesn’t look familiar please use create-react-app for you application and learn the fundamentals!

Finally!!!! With all this setup we should be ready to run our code, lets setup our scripts in package.json file

package.json

With this you should be able to type down yarn start in your terminal project directory and Webpack will run your react application on port 3000(localhost:3000), Yayyyy 🎊🎊

Setting up Typescript and type checking with React

Now you could just stop here and just continue building your react application but if you’re a good developer you will setup typescript aswell.
Why typescript? It allows for type safety in your application. JavaScript is that cool dad who will let you do whatever you want, but as your application grows up you will wish that your dad was stricter with you because now you’re a spoiled brat……ahem in any case, where was I? Oh yeah typescript, lets get to it.

yarn add --dev typescript @babel/preset-typescript fork-ts-checker-webpack-plugin

Typescript and @babel/preset-typescript will help us convert our code to JavaScript but fork-ts-checker-webpack-plugin is key. This will do type checking for you and will fail builds. Without this Webpack will bundle your project without checking types. @babel/preset-typescript will only help strip out the ts bits of the code and not type check(yeah I know its weird).

We now need to make some modifications to our webpack.config.js and .babelrc file

webpack.config.js

.babelrc

Phew, after this you can start using your strict dad typescript, trust me you won’t regret this in the future. You can change all .jsx file extensions to .tsx and use typescript like below

index.tsx

Notice how if you change line 6 from num = 2 to num = "2" Webpack will complain about that line and give you helpful errors of what's wrong.
Finally you’re all ready to rock and roll.

The repo for this project can be found here, I have added and will continue adding helpful plugins and loaders to this repo as a base for others to use. This repo also includes CSS bundling that I have not gone over in this article, but I’m sure you can understand what’s going on in Webpack config now that you’re a pro ;) Happy coding!

floydjones1/react-webpack-custom