Webpack Basics Explained

a few months ago

I am primarily a backend developer, but I love fiddling with Javascript. Yeah I know, that’s strange, but I don’t find annoying to sometimes write some CSS or some frontend logic in JS. But I had a problem. I haven’t had any chance to develop anything on fronted for couple of years. Before that I was writing all logic in JQuery, using simple pattern: When Event happens Do something.

When I decided I should check the state of Javascript a year ago I found that we don’t do that anymore. There is this things called Single Page Applications that were built using JS Frameworks, most famous of them being Angular, React, Ember and Vue. OK I figured I will learn at least one of those, and they had one thing in common. The thing that every single person on the internet was complaining about being too complicated to configure. Webpack. Everyone was using Webpack and hating it in the process. So let’s talk about that Webpack then.

What is Webpack?

The official definition is “Webpack is a module bundler”. Well, that sounds…complicated. But You can translate word module as a file. So it bundles files. See before, when I was doing Javascript common thing to do was to write JS using JQuery in one big file that contained around 1000 lines. Imagine if we did that with PHP or Java.

When ECMA Script was introduced we could import other JS files into each other, and that is where the word module comes. But that’s is all fine for developer who writes an application, but the problems was that that’s not optimized for browser usage. First of all, support for this new features were not so good. Yeah we still had to optimize for IE, that didn’t change sadly. What did change is that Safari is now joining in being super annoying to optimize. Second thing we want in production is to have only one file included in HTML and we want that file minimized.

So that is where we introduce Webpack. It is going to do that for us automatically. We just need to tell it that in configuration. I am going to explain simple configuration setup, that is enough for 90% of projects out there.

First we install webpack

Some of You like to install it globally using –global flag but that’s optional.

For the most simple cases we don’t even need configuration. We just provide webpack with input and output files.

We can see that Webpack added around 70 lines on it’s own in output.js file. Don’t worry about those. That’s just boostraping Webpack code, which in bigger scale of things, don’t really matter.

If we want to do anything else we have to have configuration. So we make a configuration file. The name should be webpack.config.js, but if it’s something else you can let Webpack know by specifing the path to the file using

So the main thing we have in configuration is entry and output. Entry is where we specify all files that we want Webpack to build and output is where we specify where we want files to be auto generated.

So let’s see most basic Webpack configuration.

So let’s explain each line.

This is just a simple include of Webpack module. This require key word is from underscore library that Webpack use for including files that it needs.

Same as the line before, but now we are including path. This is just so that instead of relative path, we have absolute path in case we need it. We will need it in our output path configuration.

This is new ECMA Script syntax and it just means that we are exposing to the outside world what ever is between brackets. All our configuration will be there.

This is our entry configuration. You can see this as our input files. The common thing to do is to separate your logic and vendor stuff like JQuery, React or in our case Vue and Moment. Vue is, like I wrote in the beginning, a JS framework and Moment is this awesome date-time module. We don’t want that mixed with our logic.

Why?

Well each time we change something in our code, Webpack needs to build that, and if we have a lot of lines of code, that build time can be long. So want to separate our app logic from vendor JS because we want to reduce the number of lines that Webpack needs to deal with in order to have fast development.

Getting back to the configuration, object names are represented by main and vendor. They are just our names of output files. So main.js is where all built code from app.js will be and vendor.js is where vue and moment modules will be squashed.

Here we are just telling where public path is and that file names should be just name of objects we have given in entry part of configuration. We can put hash in the name of filenames, if we would like caching we would write something like this

When we are developing we don’t want to type webpack command over and over again when we change something. So we have solution for that. Just put –watch flag.

Also we can hide all the unnecessary stuff from being shown and show progress of build process.

So finally command could be

If we want to write our JS using framework in our case Vue.js then we also need Webpack to make our life easier. Vue has this files that have .vue extensions. That’s not something that browsers can interpret. So Webpack then comes to save us again, converting that code into javascript, using something called loaders.

We need loader for vue so we pull that from npm.

And in our configuration we add a new object module.rules.

So here we first have test which is a simple regex that tells Webpack to look for all files that have .vue extension. Exclude is that it should ignore all .vue files in node_modules folder, because we are going to assume that is all that sorted out. And finally the name of loader, in our case vue-loader.

There are also css-loader, style-loader, file-loader, url-loader, etc… Use them as You need them.

So in order to write JS and use all this fancy new features we have to transform it to Vanilla JS that all browsers can understand. We do that by using Babel.

We have to add babel loader, in the same way we added a vue-loader.

This means: Take all js files and run them through babel in order to transform them to plain old javascript.

Next We have to tell what language we are writing in. Let’s say we are using ECMA Script 2015. So Babel will look for that in our files and transform it, so that even IE can understand us. We have to make .babelrc file in our root folder and put this in it:

And install it using

Now our code is working in all browsers.

Final thing left to do is to minify this code. We do that using Webpack plugins.

We add one more section in configuration, called plugins and initialize Uglify plugin.

After we run webpack again, our code should be minified.

So that is it. These are the basics of Webpack configuration. It can be overwhelming for the beginners sometimes, especially if You need to do something more then this, but If You want to study more about Webpack I recommend official Webpack documentation and this excellent book, called Webpack: From apprentice to master

 

Anel Bejtović

About the Author

Anel Bejtović

29 year old software developer and beer brewer from Mostar, Bosnia and Herzegovina, currently living and working in Frankfurt am Main, Germany.

Follow Anel Bejtović: