This post was originally published on August 14, 2020 on my blog.
I love when this happens. I talk about it all the time in regard to the fact that learning something once usually isn't enough to really stick.
It might be that we don't have enough overall awareness of the subject matter at hand at that specific moment in time or we might not be as focused as we could be on another day.
Anyway, I always advocate not giving up on learning something - especially coding-related - when it doesn't stick after the first time (or first few times!).
For me, I think my brain finally wrapped itself around how Webpack, Babel, and the overall JavaScript ecosystem work together. I'll try to explain as best as I can so that it might hopefully help someone out in the same position:
We run a React app using Node (npm) - usually 'npm start' on the command line.
Once the app is started ('npm start'), Webpack is called to run and watches for any files that may have changed since the last time it was run.
If there are changed files, Webpack then sends these into Babel, which then turns the JSX (used in React) into JavaScript.
Webpack then sends that JavaScript to the browser via the development server (usually a local port, i.e. port 3000) and that's where we see the changes on the browser.
I'm fairly sure that's how it works, but I could definitely be off on a point, so if you're more experienced with React, Webpack, and Babel - feedback is certainly welcome!
P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen right over here >>
P.P.S. Have a coding project you want to work on in a supportive environment of other creative coding women?
Sign up for my email newsletter for more details! >> More info here
Top comments (2)
Oh, I just love those "something just clicked" :) Usually it happens in the morning, after waking up, after fiddling with something for hours, late night.
Your overview is nice, but maybe a bit too broad, and maybe some terminology is not to my liking. Let me give it a shot...
1) We don't "run" React app using Node. Browser runs it (let's ignore server side for now). Actually we don't need Node at all to program in React but yes, most people use npm, Webpack, etc. because it's easier.
So "npm start" just runs a shell command you defined yourself in your package.json. And in most cases, it is a "webpack-dev-server". Because in order for browser to run React code, it needs to get it first and browsers get stuff by contacting webservers. That's what webpack-dev-server is. It's a mini webserver that serves the final code to your browser.
2) once you do "npm start" what happens roughly is this: Node reads your package.json and searches for the command to run in there (let's say its webpack-dev-server) and runs it ---> webpack-dev-server starts but before serving anything it runs webpack ----> webpack does A LOT of stuff by calling plugins and returnes a "final code" to webpack-dev-server ----> webpack-dev-server executes file watcher to monitor changes in original files. If file watcher detects changes webpack-dev-server will rerun webpack, get new code and,,, ---> webpack starts webserver that serves final code to your browser to run
3) What Webpack does? Ther's hardly a limit on what it can do. But Webpack alone does very little. It "orchestrates" what plugins do (ones you define in webpack config for the project) and very importan it bundles the code so many js files become one (or more) bundles. But it does so much more than calling Bebel. Babel is just one of the possible plugins. Plugins can and usually do: minimize css/html/js, remove comments, compress files, copy/move files around, optimize/compress images, etc. There are hundreds of plugins, you can code your own, well, you could make your kitchen light go on with it if you have home automation system :)
Only after those plugins execute (Bebel too, but later on that), Webpack bundles the resulting js and does it so cleverly. So, if you use a huge library of 1MB in your code but use just one of its functionalities, Webpack will include only that functionality in the final bundle so it will not end up being 1MB! It called "tree shaking". It will also deduplicate (same functions/libraries used in different places/libraries will be included only once)... and a lot of other cool stuff.
What Babel, as a Webpack plugin does? It's wrong to say babels turnes jsx into js. Babel is a JavaScript compiler. Mostly you use it to write your code in nice modern ES6 and then make it runnable in browsers made when ES6 didn't even exist :) It changes the syntax to match different browsers and make it cross-browser compatible (again, you choose this in Babel settings). So it transforms, polyfills, etc. your code.
This is absolute gold - thank you so much for the in-depth explanation, I so appreciate that!
Read it over just now, and I'll probably give it a couple more reads and map it out in my notes to get a deeper idea of it.
Thank you, again :D