Let’s create our own webpack configuration bundle a small JavaScript utility library using webpack and babel.

Setting up the Source code:

We will be creating two utility functions into two separate files in our source folder.

Step 1: Create a directory demo and run the following command in it

The following command will create a package.json in your project root. I am using a -y to initialize it with the default option:

$ npm init -y

Create a directory structure that looks like this:

demo

| — src/

| — package.json

Step 2: Adding our source code

Add source code into src directory :

src

| — index.js

| — capital.js

| — addDOMContent.js

Utility library contains two functions capital and to capitalize a string addDOMContent, to add content to a web page, each in its own module.

capital.js:

function capital(string) {
  const capitalizedString =
    string.substring(0, 1).toUpperCase() + string.substring(1)
  return capitalizedString
}

export default capital

addDOMContent.js:

function addDOMContent(content) {
  const node = document.createElement("h1")
  node.innerText = content
  document.body.appendChild(node)
}

export default addDOMContent

Inside our index.js, we will import these two functions.

index.js:

import capital from "./capital"
import addDOMContent from "./addDOMContent"

export { capital, addDOMContent }

We got this source code ready but we need to bundle it so that the browsers can understand. Anyway, as a responsible developer, we are going to do that.

#javascript #programming #nodejs #babeljs #web-development