UI/UX Design

What is Webpack and how to use it

When you’re working on complex web apps you will most likely need to use different javascript libraries. Some libraries can be installed using Bower or Npm and can run directly in the Browser such as: ReactJS, AngularJS, jQuery, Underscore, Lodash and others, while other libraries can be installed only with Npm and cannot run directly in theBbrowser. For this type of libraries you can use Webpack which will allow you to run these libraries directly in the Browser.

This is just one of the functionalities from Webpack and I will write more about that in this post. To give you a better understanding about how it works I will start with a simple example.

1. How to Install

If you go to https://webpack.js.org/guides/installation you will find all the steps you need to install.

Basically all you have to do is to open your Terminal and run the following command

npm install webpack -g

which will install Webpack globally in your computer and not only in the project you are working on. To verify if it was installed successfully, in Terminal type:

webpack -v

This command won’t show you the version but instead it will print a list of commands to use.

 

2. How to Use

Now that Webpack is installed, let’s see how to use it.  For that I will use a simple javascript library called Only. This library can be used to return specific properties from a big javascript object rather than returning the whole object.

The problem with this library is that it can only be installed using Npm and cannot run directly in the Browser.

To use this library create a new project, open a new Terminal window and run this command:

npm i only

A new folder will be created in your project called node_modules which contains the library you installed but unfortunately you can’t just use it in your project yet.

In your project create a new file called main.js and add this sample code:

var only = require('only');
var obj = {
  name: 'tobi',
  last: 'holowaychuk',
  email: 'tobi@learnboost.com',
  _id: '12345'
};
 
var user = only(obj, 'name last email');

console.log(user);

When this file is compiled with Webpack, the first line in the code above imports the library, then it will create a sample javascript object and at the bottom it will use the library to get only the first name, last name and email address from the object and print them in the browser.

To compile the file you will have to run the following command in Terminal:

webpack main.js bundle.js

which will get your main.js file and will compile it into the bundle.js.

All you have to do now is to add the bundle.js file into your html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

then in your Browser’s Developer Tools if you open the Console you should see the new object.

At the moment, everytime you make a change in main.js you will have to run the command to compile it into bundle.js but I will show you in another post how to do this automatically.

This is basically one of the things that Webpack can do and in the next post I will explain how to use it to compile multiple javascript libraries into a single js file.

Add comment