Skip to content

Webpack

!webpack logo

What is it?

Webpack is a bundler that uses a dependency graph to bundle our code and assets (incuding static assets such as images) into a ‘bundle’ which we can then deploy.

To put it simply, webpack is a software that transforms your development files (the files you edit) into production files (the files you deploy).

How?

Webpack takes an input file (‘main.js’), finds all the files it depends on (‘variables.js’), and outputs a bundled file that contains all the code in our application. But Webpack can do so much more! With it we can import CSS and image files directly into our JavaScript. We can compile CoffeeScript, TypeScript, SASS, and LESS.

!webpack-graph

Why?

Creating a huge monolithic JavaScript file is ugly and difficult to maintain, but multiple JavaScript files require multiple requests to fetch, and can add significant overhead. The solution is to write code splitting it into as many files as you need, and using require() and import statements to connect them together as we see fit.

When we require something from a file, that becomes a dependency of that file. All our interconnected files and assets form a dependency graph. Then we use a bundler to to parse through these files and connect them appropriately based on the require and import statements and perform some more optimizations on top of it to generate one (sometimes more than one) JavaScript files which we can then use.

Webpack can also load non-js files, such as static assets, JSON files, CSS and more.

Read more