Post
Ask Question

WebPack - For Bundling Your Scripts

What is webpack?

Webpack is essentially a code bundler. It takes your code (modules), transforms and bundles it, then returns a new ‘compiled’ version.

Why use bundling javascript code?

Without the module loaders and bundlers, you could always combine your files manually or load your HTML with countless <script> tags, but that has several disadvantages,

  • Modules and libraries are all in separate files, which means that each file requires a <script> tag in the HTML. The HTML file is loaded on page load, and separate tags for each file means the module and library files would also have to be loaded one by one. This can be a time-consuming process as projects get large. In order to reduce the number of requests for loading all the modules, you can bundle them into one or a few (if there are a lot) files. This is known as the build step. As part of bundling, you can also minify the code, which is removing any unnecessary characters such as new lines, white spaces, and comments. This also helps speed up bundling and the build process.

  • Without bundling you need to keep track of the proper order in which the files should be loaded, including which files depends on which other files and make sure not to include any files you don’t need.

Obviously, this entails a lot of manual work, instead of letting the computer do it for you.

How to Use webpack for bundling our scripts

Here are few steps to use webpack

First, we create a basic project in which we use web pack for bundling out scripts.

Create new folder webpack-demo add HTML file index.html with the following content.

  1. <!doctype html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Getting Started</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <script src="file:///D:/webpack-demo/dist/bundle.js"></script>  
  10. </body>  
  11.   
  12. </html>  
Create src folder inside webpack-demo and add index.js and app.js (modules)

Code for - app.js

  1. //   
  2. export default function app() {  
  3.     var element = document.createElement('div');  
  4.     element.innerHTML = 'Hello webpack';  
  5.     return element;  
  6. }  
  7. document.body.appendChild(app());  
  8. //  

Code for - index.js

  1. //   
  2. import app from './app';  
  3. app();  
  4. //  

Then we see our project stucture like below

JavaScript 

In the above 2 steps we create our basic project; now we setup webpack for bundling our js.

FYI: We need to include npm and nodejs for managing node packages (https://nodejs.org/en/download/)

Open cmd and go to the project root path and run npm in it on cmd.

JavaScript

 After above command runs on cmd. We see that package.json file is created for managing npm packages.
  • Then install webpack using npm install webpack webpack-cli --save-dev on cmd
  • Now add webpack.config.js on your root project folder and add the following code
    1. //  
    2. const path = require('path');  
    3. module.exports = {  
    4.     entry: './src/index.js', //entry point where webpack start bundling  
    5.     output: {  
    6.         filename: 'bundle.js', //bundle file name  
    7.         path: path.resolve(__dirname, 'dist') //store bundle.js in dist folder on root  
    8.     }  
    9. };  
    10. //  
  • Now, we add the following changes to package.json file for building our project.
JavaScript 

  • Then after running npm run build command on cmd for bundling your js.
  • We see output like below.
JavaScript 
  • Now, see the bundle.js file created in disc folder.
JavaScript 

  • Check inside and we see that our two script files (index.js and app.js) are combined and create bundle.js and minified code.
 JavaScript

  • Now we run the index.html page.
 JavaScript

Now, we see that our bundle.js load works perfectly. Here we can see how we remove multiple HTTP calls for multiple js (index.js and app.js in our case) and create a bundle and load the only bundle.js.

FYI

Here, we directly run HTML page but we also create development server using webpack.

In the next blog, we will see how we can bundle your CSS using webpack.