Simple JS Bundler Project using Webpack

Create a new directory: (Article 2025-04-21)

mkdir webpack-project

Navigate to the directory

cd webpack-project

Initialize new Node JS project

npm init -y

This creates package.json file

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Install webpack and webpack-cli as development dependencies

npm install webpack webpack-cli --save-dev

Create project folder structure:

Create src directory

mkdir src

Create empty file index.js

type nul > src/index.js

Add contents to index.js file

function sayHelloWorld() {
  alert('Hello World');
}

sayHelloWorld();

Modify your package.json to include a build script

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "devBuild": "webpack build --mode development",
  "prodBuild": "webpack build --mode production"
},

Run the script to generate bundled file “dist/main.js” file.

Example:

npm run <script-name>

Purpose of the build scripts:

• devBuild generates content for development mode
• prodBuild generates content for production mode