New to Webpack

by Eche Mkpadi

So, recently I was given a task at the office, for some reason, it was thought best I do it in Javascript.

I decided to go the normal way, as I would in PHP, modular approach. This is where the problem began. I discovered that the browser could not load the imported modules. A bit of search online pointed me to module bundlers, webpack and browserify, amid others. Well, I had a chat with an inhouse senior developer suggested I use Webpack. Hence, my encounter with Webpack.

Intro to webpack.

Webpack is an open-source JavaScript module bundler.. Apart from its main purpose which is to bundle JavaScript files for usage in a browser. It also brings along other features, such as: - code splitting, optimizing modern code, stripping out unused code, dependency graph of your project.

Project set up [optional]

Project layout:

project-root     
 |- /src
    |- index.js
    |- name.js
 |- index.html
 |- package.json

[Do not add package.json, it will be created automatically by the command: npm init.

Set up

Ensure you have npm installed first, if not head over to npm.
To set up package.json, run the following in your project root and fill in the details:

npm init ##or npm init -y to skip questions

Install webpack and it's cli:

npm i -D webpack webpack-cli

An example:

{
 "name": "imageboard",
  "version": "1.0.0",
  "description": "A platform to share images without creating any account",
  "main": "index.js",
  "scripts": {
  "build": "webpack --mode development", ##For those using below NodeJs v8.2/npm v5.2.0
  "test": "echo \"Error: no test specified\" && exit 1"
 },
  "author": "eche",
  "license": "ISC",
  "devDependencies": {
  "webpack": "^4.35.0",
  "webpack-cli": "^3.3.5"
  }
}

As from v4, Webpack can work without any configuration file. Although, without any configuration, it can only bundle JavaScript resources. An illustration without the config file, webpack.config.js, will show us why we need a config file for production.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack</title>
</head>
<body>
    <div>
	    <form id="myForm">
                <label for="username">Enter your name</label>
		    <input type="text" id="username">
    		<button id="submit" type="button">submit</button>	
	    </form>
    </div>
</body>
</html>

name.js

function displayName(myName) {
    document.write("Welcome" + myName + "!");
}

function getName(inputID) {
    return document.getElementById(inputID).value;
}

function treeShaking() {
    document.write("Dormant function!");
}

export {displayName, getName}

index.js

import {displayName, getName} from './name.js';

let submitBtn = document.getElementById("submit");

submitBtn.addEventListener("click", () => {
    let myName = getName("username");
    displayName(myName);
});

Run webpack:

npx webpack

If there is no error, you will notice that Webpack has added a new folder in our project root, dist/. Without any config file, Webpack will automatically store the bundled js file in this folder. It will also take the entry point as src/index.js

Move index.html into the newly created distributable folder, dist/ and add a script tag to our HTML file:

<script src="./main.js"></script>

Open index.html in a browser; fill the form and click submit. If everything works well, you will see:

Your name is <your_name>!
Thanks to Webpack
  • All JavaScript files were bundled into a main.Js file.
  • main.Js file is minified, which is an optimization.
  • The browser understands some ES6 standards like; arrow functions, import and export statements.
  • function treeShaking appears in name.Js but not in main.js. This is because Webpack removes unused code (tree-shaking effect).

But notice that index.html was not minified. Likewise, if we had other non-JavaScript resources they will not be optimised. This will affect the size and rendering speed of our project. Hence, the need to use Webpack config file for production.

We will delve into webpack configuration in another article.