What does webpack do?

If you are building a modern JavaScript application, you have likely heard the term webpack mentioned before.

Webpack is a static 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.

Modules are reusable chunks of code built from your app’s JavaScript, node_modules, images, and the CSS which are packaged to be easily used in your website. Webpack separates the code based on how it is used in your app, and with this modular breakdown of responsibilities, it becomes much easier to manage, debug, verify, and test your code.

When webpack processes your application, it builds a dependency graph that maps out the modules that your project needs and generates one or more bundles. A bundle is a distinct grouping of connected code that has been compiled and transformed for the browser.

If one file depends on another (it uses the code from a separate file), webpack treats this as a dependency. Webpack also takes your non-code assets (images, fonts, styles, etc.) and converts them to dependencies for your application.

Why webpack?

To understand why you should use webpack, let's recap how we used JavaScript on the web before bundlers were a thing.

I remember the good old days. Creating a new web app was simple. All you needed to do was to create an HTML file, add jQuery and your source code with a <script src="./main.js"> tag and you were good to go.

Today it's different.

The apps you build today are more and more complex. Your project uses tens or hundreds of JS files and also lots of dependencies.

Inserting script tags is no longer a good enough solution - it just doesn't scale. It would give many HTTP roundtrips and make your apps slow. It's would also be difficult to maintain your app.

This is where webpack comes into play.

When you are using webpack, each JavaScript file you write becomes a module. Webpack puts all your modules plus the dependencies (like React) in one big file. This big file is called the "bundle". This makes your code much easier to maintain and it also gives you a quicker load speed with just one round trip.

It's the bundle.js that you include in your HTML file. Only one <script> tag is required!

Webpack also gives you the possibility to use new features such as ES6 and Reacts XML-like language JSX. Webpack transpile the code to simple JavaScript code that all browsers understand. To transpile code webpack uses a plugin. We are going to use the Babel plugin to transpile our ES6 and React code in this course. Babel is the most common transpiler for doing this.

Today users have high expectations from the web. Everyone hates slow apps.

So you must make an effort to making your apps quicker. One way to do that is to minify and uglify your code before shipping it. Minifying means removing white spaces, comments, and other unnecessary code. Uglify means to make long variable names shorter. These are all small things but it adds up! Uglifying and minifying come out of the box with the webpack.

Loaders

The motivation behind webpack is to gather all your dependencies, which includes not just the code, but other assets as well, and generate a dependency graph.

Bundlers are only prepared to handle JS files, so webpack needs to preprocess all the other files and assets before they get bundled. This is where Loaders come into the picture.

Webpack supports a large variety of formats through loaders.

According to the official documentation, Loaders are transformations that are applied to the source code of a module.

Basically, loaders allow you to do a number of things like transform files from a different language to javascript, or inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules.

Apart from creating a dependency graph, and bundling the modules, webpack can perform a number of tasks.

Webpack gives you control over how to treat different assets it encounters. For example, you can decide to inline assets to your JavaScript bundles to avoid requests. Webpack also allows you to use techniques like CSS Modules to couple styling with components, and to avoid issues of standard CSS styling. This flexibility is what makes webpack so valuable.

Plugins

Apart from all the functionalities provided out of the box by loaders, we can perform a lot of advanced tasks through plugins.

Plugins can intercept runtime events supplied by webpack. Webpack provides hooks for all the runtime events. And we can tap into these hooks to do a lot of things.

For example, the MiniCssExtractPlugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.

To wrap up, webpack is a great tool that can be easily used out of the box to automatically load and bundle CSS and other files and assets in addition to JS , with the help of an easy-to-set-up config file. And at the same time, offers the users the freedom to perform much more complex tasks with its vast configurable options, and plugins.