Disclaimer: this is not a webpack tutorial; there are plenty of those out there.
Without a doubt, using webpack and understanding what it does has actually made me a better developer. But first things first - what is webpack?
From webpack's GitHub repo:
"webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."
Or in short: it is magic.
Up until a year ago, I was terrified of webpack. Working with React.js, I was satisfied with simply knowing how to code and create components, nothing beyond, and left the configuration and heavy lifting to the pros in my team.
It always seemed to be a boring and complicated task.
However, I always thought that understanding this mystical creature was some unattainable dream I would one day find the powers to achieve, something only the bravest, most senior developers could tackle.
I was thrilled when Facebook's create-react-app came out because it meant that moving forward, I wouldn't have to know how to bundle my app, and I'd be able to go at it guilt-free. At least, that's what I was told:
See? Even their docs say so!
And that's how I managed to get by during the majority of my years as a front-end developer, creating awesome React applications without having to handle that spooky tool.
You can be an awesome front-end developer without knowing the entire process from coding to bundling to deployment, but do you really want that? (Spoiler alert --- you don't.)
Starting
As the months flew by, I started a new job at a new company, and was the only one on the team who knew front end, making me the front-end lead. Eventually, this meant that I had to step up my game. Taking on my fearsome arch-nemesis was a fitting first step toward achieving that goal.
I created a new React app, only this time, I didn't allow myself to just resort to an out-of-the-box solution; I created a new app from scratch, going step-by-step, until eventually I installed webpack and started the configuration process.
As a junior front-end developer, I was completely oblivious to some critical concepts I needed to know and understand to become better. Not only did I not know what they meant, I didn't even know the wording.
Up until that point, I was used to having some magic take my source code and turn it into something (let's call this something... a bundle!) that could be served and deployed, but I never stopped to think what was going on under the hood.
My first step was to start reading the getting started manual (well, duh).
This seemingly simple step made me come across some of these concepts, which at the time seemed to be super advanced. I needed to review them to understand webpack and the flow of code-to-bundle, and so I went on to further read about terms like bundling and transpilation.
Bundling is when webpack (or any other similar tool) processes your application and builds a dependency graph, which then maps every module your project needs, and generates one or more bundles.
Transpilation is the process of reading source code, written in one programming language, and producing the equivalent code in another language.
For example, webpack can use plugins such as the Babel JavaScript compiler to take ES6 JavaScript code and transform it into plain old ES5 JavaScript that any browser could understand.
Starting to see the bigger picture and completing the getting started section, I went on to experimenting.
I started with the default configuration, adding and removing attributes as I went on, seeing how it affected the bundle (or, more accurately, what errors were caused due to breaking the configuration).
Eventually, I pretty much understood how to configure webpack for my needs, a task that seemed impossible to achieve before.
Other great ways to learn about webpack and what you can do with it are browsing through different webpack plugins, or manipulating and overriding the default out-of-the-box webpack configuration used by create-react-app, using the react-app-rewired module.
A wonderful project such as create-react-app has an awesome webpack configuration, which is responsible for much of the magic taking place behind the scenes.
My Experience With webpack
My experience with webpack was the first time I conquered my "fear of the unknown" and stepped out of my comfort zone. The payoff was tremendous, resulting in a huge level-up that is still ongoing.
Starting with basic concepts like bundling and transpiling, I was on a roll and knew I was only scratching the tip of the iceberg. Equipped with newly found confidence, I was now encouraged to learn more about the front-end world, which, over time, made me fall deeper in love with it.
Stepping out of my comfort zone led to me improving, which in turn helped me gain more confidence, until I felt comfortable enough to give front-end presentations to my team and my company's front-end guild.
So, zooming out, that initial, minor, uncomfortable encounter with webpack actually set me on the course to becoming a better, more confident developer who absolutely loves what he does.
My main takeaway is:
Always be curious about the mechanics and the under-the-hood of the tools and technologies you use, something you (probably) take for granted.
Don't be satisfied with just understanding something only to the point of making it work.
Dig deeper because you might just accidentally enjoy it.
Top comments (6)
I think a lot of people fear webpack because of opinions from versions <3. Now, with version 4+ there is literally even zero config.
Slap your js into
src/index.js, do your thing, runnpx webpack-cliand it will spit out results todist/main.js(afair).This is the most basic webpack usage. No babel, no loaders, no preprocessors, just resolving, bundling, and with optimizations if used with
--mode=production.I must say, i jumped on the webpack wagon pretty early (somewhere in 1.x), learning curve was steep, i still sometimes feel its magic (especially when it comes to cacheGroups thingy ;)), but this is hands down, the best thing i learned for frontend development (im performance oriented).
Hey Pawel, I actually started my Webpack experience with version 4 and was still afraid ;)
The learning curve wasn't too steep though.
And yes, the boost to my frontend knowledge thanks to Webpack was amazing!
Yesterday I found cool video playlist about basics of Webpack - youtu.be/3On5Z0gjf4U
Great post man. I have put off learning Webpack for quite some time now. Time to take a deep dive.
Cheers
Thanks man! I get you, it's definitely worth the while
Thanks man! Yes, I actually used Parcel for a while, but webpack did its educational part