Webpack – both the cause and solution to so many problems

Over the years we’ve seen the javascript build process become more and more advanced and more and more complicated. With the introduction of task runners like grunt we were able to configure each part of the process from css compilation to javascript compression, resulting in a nice set of production ready files. Overtime more and more steps would be added to the build process and inevitably it got slower and slower especially for large projects. As gulp gained traction a lot of folks moved over because despite being slightly more complicated initially to work with, it could deliver output far quicker due to the way data and files are processed. The problem with both of the above approaches is that the task runner gulp or grunt were not designed specifically to build our static content and it was up to us as developers to connect a number of packages together. Enter webpack… Once you’ve created a few build routines using task runners, you’ll end up copying over the tasks and then editing them for the new project. It’s messy and overtime scripts get out of date and then you need to consider going back and updating them all which is a pain and another place for your code to fail. Webpack solves this problem by replacing loads of complicated gulp or grunt tasks with one complicated config file, and I mean complicated. On first view you would be forgiven for not having a clue what is going on, as it is not at all intuitive, and if your project needs to generate multiple output files from multiple sources it gets even messier. The thing about webpack is that despite the crazy configuration required, it is immensely powerful and once you get it working I don’t think you’ll regret how much hair you pulled out trying to get it setup. One of my favourite features is in-memory compilation which makes a pretty big difference when you’re working with 100k+ lines of JavaScript and css.

If you are starting a new project then I recommend you take the time and invest webpack. If you don’t have a build routine then I definitely recommend you use Webpack. If you are working with a large complex project built using gulp or grunt you need to weigh up the risks and time required to migrate vs the benefit.

I found some projects much harder than others to migrate and in some cases it was just best to leave the old build scripts as they were until a major update was required.