The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Setting Up Webpack

Next ►
►

In this section, we will guide you through the process of setting up Webpack for your project. By the end of this module, you will have a basic Webpack setup ready to bundle your JavaScript files.

Prerequisites

Before we start, ensure you have the following installed on your machine:

  • Node.js: You can download it from nodejs.org.
  • npm (Node Package Manager): This comes bundled with Node.js.

Steps to Set Up Webpack

  1. Initialize a New Project

First, create a new directory for your project and navigate into it using the terminal:

mkdir my-webpack-project
cd my-webpack-project

Next, initialize a new Node.js project by running:

npm init -y

This command will create a package.json file with default settings.

  1. Install Webpack and Webpack CLI

To use Webpack, you need to install it along with the Webpack Command Line Interface (CLI). Run the following command:

npm install --save-dev webpack webpack-cli
  • webpack: The core Webpack library.
  • webpack-cli: The command-line interface for Webpack.

  1. Create the Project Structure

Create the following directory structure for your project:

my-webpack-project/
├── src/
│   └── index.js
├── dist/
├── package.json
└── webpack.config.js
  • src/: This directory will contain your source files.
  • dist/: This directory will contain the bundled output files.
  • webpack.config.js: This is the configuration file for Webpack.

  1. Create a Basic Webpack Configuration File

Create a file named webpack.config.js in the root of your project directory and add the following content:

const path = require('path');

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

Explanation:

  • entry: Specifies the entry point of your application.
  • output: Defines the output file name and location.
  • mode: Sets the mode to 'development' for easier debugging.

  1. Add a Script to Run Webpack

Open your package.json file and add a script to run Webpack:

"scripts": {
  "build": "webpack"
}

  1. Create a Sample JavaScript File

Create a file named index.js inside the src/ directory and add the following content:

console.log('Hello, Webpack!');

  1. Run Webpack

Now, you can run Webpack to bundle your JavaScript files. In the terminal, execute:

npm run build

If everything is set up correctly, you should see an output similar to this:

Hash: d1e8b1a2b1e8b1a2b1e8
Version: webpack 5.0.0
Time: 200ms
Built at: 2023-10-01 10:00:00
    Asset      Size  Chunks             Chunk Names
bundle.js  1.45 KiB       0  [emitted]  main
Entrypoint main = bundle.js

You will also find a bundle.js file inside the dist/ directory.

Summary

In this section, you learned how to set up Webpack for a new project. You:

  • Initialized a new Node.js project.
  • Installed Webpack and Webpack CLI.
  • Created a basic project structure.
  • Configured Webpack with a simple configuration file.
  • Added a script to run Webpack.
  • Created a sample JavaScript file and bundled it using Webpack.

In the next section, we will dive deeper into the Webpack configuration file and explore its various options.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved