Introduction to webpack

Let’s have a look at the important role webpack plays in simplifying the development process.

We'll cover the following

Introduction

In the beginning, JavaScript was simpler.

HTML elements in the markup had attributes with names like onclick, and if we wanted something dynamic to happen, we’d write near one line of code in the onclick attribute. Although this was simple, it was limited, and eventually, coders wanted more complex effects in the browser. They 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 still limited. JavaScript programs gradually became 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 so on. In addition to just compiling, we added performance-related tasks like minifying code or removing unused CSS selectors.

There started to be a need to coordinate all these build tools and make the path from the developer’s view of the code to the browser’s view of the code clearer.

So, for this purpose, we have webpack, which is far from the first tool to try and take on this mountain of JavaScript build tasks, but it grabbed the attention of enough developers that Rails eventually decided to make it the basis of the Rails JavaScript asset management system.

Get hands-on with 1400+ tech skills courses.