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:
- Setting up Webpack & Babel & React.
- Setting up Typescript and type checking with React.
1. Setting up Webpack & Babel
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
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:
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.
Your folder structure should look something like this, please create a src directory and a public/index.html and 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
With this you should be able to type down
yarn startin 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.
yarn add --dev typescript @babel/preset-typescript fork-ts-checker-webpack-plugin
We now need to make some modifications to our webpack.config.js and .babelrc file
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
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!