4 min readMar 5, 2020

Webpack is a static module bundler for JavaScript applications. Click here to learn more.

Common Terms & Definitions

Introduction to Webpack, Babel, Lodash & Benefits of the Webpack

What does Compile mean — Compiling is the general term for taking source code written in one language and transforming into another.

What is Module bundling — On a high level, module bundling is simply the process of stitching together a group of modules (and their dependencies) into a single file (or group of files) in the correct order. example — Webpack

What does Transpile mean— Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language. Languages you write that transpile to JavaScript are often called compile-to-JS languages, and are said to target JavaScript. example: Babel

What is Lodash — Lodash is a JavaScript library which provides utility functions for common programming tasks. It uses functional programming paradigm. Lodash is one such library which is successor of underscore.js. It is used to simplify your work of managing and editing objects and arrays by providing lots of utility methods to do so.

Some of the methods which I found quite handy and ease my development process are _pick, _map, _filter, _has.

Suppose a user sends lots of data in post parameters to you, which comes in the ‘body’ object. Now if you want to get only few key-values then you can actually pick them and store them in another object using ‘_pick’ method available in lodash.

Similarly there are various other functions which are used heavily in day to day life of a JS developer.

What is Babel — Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

What is Webpack — Webpack is a static module bundler for JavaScript applications — it takes all the code from your application and makes it usable in a web browser. Modules are reusable chunks of code built from your app’s JavaScript, node_modules, images, and the CSS styles which are packaged to be easily used in your website.

Next, we will see, how we can use webpack to bundle our styles, scripts and images. Webpack is a basically a tool to increase the speed of our application by minimising the file sizes.

To install Webpack in your project, you must have npm installed in your system.

Basic Setup —

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

webpack.config.js

const path = require('path');
module.exports = {
  mode:'development',
  entry:'./src/index.js',
  output:{
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js'
  }
}

now, you have package.json in your root directory, create a new file index.html in the root directory.

// index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
   <script src="bundle.js"></script>
</body>
</html>

Install lodash in your application

npm i lodash

create a new folder ‘src’ in the root directory and in the src folder, create a file ‘index.js’. This is just a javascript code to append component in div element of the html dom.

// src/index.jsimport _ from 'lodash';
function component(){
  const element = document.createElement('div');
  element.innerHTML = _.join(['Hello','Webpack'],' ');
  return element;
}
document.body.appendChild(component());

We also need to adjust our package.json file in order to make sure we mark our package as private, as well as removing the main entry. This is to prevent an accidental publish of your code.

‘+’ means add
‘-’ means remove

+   "private": true,
-   "main": "index.js",

Creating a Bundle

First we’ll tweak our directory structure slightly, separating the “source” code (/src) from our "distribution" code (/dist). The "source" code is the code that we'll write and edit. The "distribution" code is the minimized and optimized output of our build process that will eventually be loaded in the browser. Tweak the directory structure as follows:

webpack-demo
  | package.json
+ | /dist
+   | index.html
- | index.html
  | /src
    | index.js

With that said, let’s run npx webpack, which will take our script at src/index.js as the entry point, and will generate dist/main.js as the output. The npx command, runs the webpack we installed in the beginning:

Open index.html in your browser and, if everything went right, you should see the following text: 'Hello webpack'.

Update package.json

-      "test": "echo \"Error: no test specified\" && exit 1"
+      "test": "echo \"Error: no test specified\" && exit 1",
+      "build": "webpack"

Now the npm run build command can be used in place of the npx command we used earlier. Note that within scripts we can reference locally installed npm packages by name the same way we did with npx. This convention is the standard in most npm-based projects because it allows all contributors to use the same set of common scripts (each with flags like --config if necessary).

JavaScript ES6 Refreshment

CONST & LET

medium.com

I know, this is just an Introduction to WebPack, but that’s it for now, if you want to learn more about Webpack and Babel, please let me know in the comments.

Creating a Bundle

JavaScript ES6 Refreshment

CONST & LET

Written by Ashwani Garg

No responses yet