mahammad-mostafa
0

Webpack Demo Exercise

screenshot of Webpack Demo Exercise

This is the third project in the second module of Microverse program. It is an exercise for learning different WebPack tools and configurations.

GithubDemo

Overview

The WebPack Demo Exercise is a project within the Microverse program that focuses on using WebPack and its different configurations. It includes three main files (index.html, index.css, and index.js) in the source directory, as well as config linters for HTML, CSS3, and JavaScript in the .github folder. The project's live demo can be accessed here.

Features

  • Simple page structure: The project has a basic page structure with one h1 tag and div tags.
  • Dynamic content: The content of the div tag is loaded dynamically using JavaScript.
  • Basic CSS rule: The project includes a basic CSS rule to color the page background.

Prerequisites

Make sure you have NodeJS installed for installing and running all the necessary packages.

Setup

  1. Download or fork this repository.
  2. Install all dependencies by running the command npm install.
  3. For live development on localhost:8080, run the command npm start.

Deployment

To deploy this project to a live server, follow these steps:

  1. Upload the two files (index.html and main.js) in the build folder to the server.
  2. Create the distribution build using the command npm run build.

Summary

The WebPack Demo Exercise project is designed to help users gain practical experience in working with WebPack and its different configurations. It offers a simple page structure, dynamic content loading, and basic CSS rules for customization. With easy installation and deployment instructions, users can quickly dive into this project and explore further features and improvements. Contributions and support are highly encouraged, and the project is licensed under MIT license.