Introduction to webpack

In the beginning, JavaScript was simpler.

HTML elements in your markup had attributes with names like onclick, and if you wanted something dynamic to happen, you’d write like one line of code in the onclick attribute. Although this was simple, it was extremely limited, and eventually, coders wanted more complex effects in the browser and started placing JavaScript code in files external to the HTML and sending them to the browser via the script tag.

This was still simple, but also limited. As time moved on, JavaScript programs got more and more complicated, and the need to include multiple JavaScript files grew. The dependencies on third-party libraries grew. We added CSS, SASS, CoffeeScript, templates, and on and on. And in addition to just compiling, we added performance-related tasks like minifying code or removing unused CSS selectors.

Enter webpack, which is far from the first tool to try and take on this mountain of JavaScript build tasks, but is the one that grabbed enough developer mind share that Rails eventually decided to make it the basis of the Rails JavaScript asset management system.