And why you should too Disclaimer: this is a webpack tutorial; there are plenty of those out there. not 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 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. understanding I was thrilled when Facebook’s 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: create-react-app And that’s how I managed to get by during the majority of my years as a frontend developer, creating awesome React applications without having to handle that spooky tool. You be an awesome frontend developer without knowing the entire process from coding to bundling to deployment, but do you really want that? (Spoiler alert - you don’t). can As the months flew by, I started a new job at a new company, and was the only one on the team who knew frontend, making me the frontend 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 frontend developer, I was completely oblivious to some critical concepts I needed to know and understand in order 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 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 in order to understand webpack and the flow of code-to-bundle, and so I went on to further read about terms such as and . getting started bundling transpilation 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. Bundling 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 Javascript compiler to take ES6 Javascript code and transform it into plain old ES5 Javascript that any browser could understand. Transpilation babel Starting to see the bigger picture, and completing the 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). getting started 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 , or manipulating and overriding the default out-of-the-box webpack configuration used by create-react-app, using the 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. webpack plugins react-app-rewired 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 frontend 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 frontend presentations to my team and my company’s frontend 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.
