You can’t learn webpack from shiny tools

If you ask on reddit or discord how to approach the frontend ecosystem they will tell you to learn one thing at once.

A common recommendation is to start with JavaScript, and then move on to React when you are ready. You should use create-react-app (CRA) to create your project. You can learn webpack “later”.

The problem with this strategy is that later never comes. And suddenly you have grown out of CRA and need to extend it. So you eject your app and get this thrown in your face:

You get not only one – but three webpack config files. At a total of 989 lines of code.  And that’s just the webpack configs. There are more config files and build scripts that got generated for you. That is overwhelming.

The webpack config file is well commented, but it doesn’t help when you have no idea how webpack works.

You can’t learn webpack by reading a huge config file.

This is just not how learning works.

You already know how to learn a new language or tool:

  1. You start by reading about the most basic features.
  2. Then you write some code yourself implementing these basic features in a small project.
  3. It works! Your confidence increases.
  4. Now you are ready for some more advanced concepts. You read about it and repeat the process.

An essential aspect of learning programming is to write code yourself. Only reading is not enough.

You know how it works because you have already learned JavaScript, React and probably lots of other languages and tools.

So when should you start learning webpack if you shouldn’t postpone it to later?

The answer is: you should learn webpack right now.

Setting up a simple webpack project is not rocket science. Do it now while your requirements are simple. Then expand your webpack skills as your needs get more complex.

Your webpack skills should grow together with your React skills.

The feeling of knowing how everything works – including the build setup – in your app is awesome.

Only when you are confident in setting up your own webpack config you should consider using any of the shiny toolkits such as CRA, Gatsby or Next.js. Because if you don’t know how it works under-the-hood you are not equipped to make an informed decision on which one to use.

All of these toolkits have awesome features. But they also make trade-offs. Know the trade-offs before you decide to use them.

Need a good and free resource for learning webpack? I have created a webpack course where you learn how to create a React app with webpack step by step.

You will also learn why webpack is useful and what problem it solves. Sign up below to get the first lesson straight to your inbox.