Webpack Starter

This repository is a boilerplate project setup for modern web development using Webpack. It includes configurations for Babel, ESLint, Prettier, and SCSS, providing a solid foundation for building scalable and maintainable web applications.

Features

• [Webpack]: Module bundler for JavaScript, CSS, and other assets.
• [Babel]: JavaScript compiler to use the latest JavaScript features.
• [ESLint]: Linter for identifying and fixing problems in JavaScript code.
• [Prettier]: Code formatter to ensure consistent code style.
• [SCSS]: CSS preprocessor for writing more maintainable and scalable styles.
• [Dotenv]: Environment variable management for different environments (development, production).
• [Live Server]: Development server with live reloading.

Project Structure

.
├── .babelrc                   # Babel configuration file
├── .env                       # Environment variables file
├── .env.development           # Development-specific environment variables
├── .env.production            # Production-specific environment variables
├── .eslintrc                  # ESLint configuration file
├── .gitignore                 # Git ignore rules
├── .prettierrc                # Prettier configuration file
├── .vscode/                   # VSCode workspace settings
│   └── settings.json          # VSCode settings file
├── eslint.config.mjs          # ESLint module configuration
├── index.html                 # Main HTML file
├── package.json               # Project dependencies and scripts
├── README.md                  # Project documentation
├── src/                       # Source files
│   ├── css/                   # Stylesheets (SCSS)
│   │   ├── _base.scss         # Base styles
│   │   ├── _reset.scss        # CSS reset styles
│   │   ├── _utilities.scss    # Utility styles
│   │   ├── _variables.scss    # SCSS variables
│   │   └── style.scss         # Main stylesheet
│   └── js/                    # JavaScript files
│       └── index.js           # Main JavaScript file
└── webpack.config.js          # Webpack configuration file

Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js
• npm

Installation

1. Clone the repository:

   git clone https://github.com/evrendev/webpack-starter

2. Navigate to the project directory:

   cd webpack-starter

3. Install the dependencies:

   npm install

Development

To start the development server, run:

npm run start:dev

This will start a local server and open the project in your default web browser.

Building

To build the project for production, run:

npm run build:prod

The built files will be output to the dist directory.

Project Configuration

Babel

Babel is configured in the .babelrc file.

Environment Variables

Environment variables are managed using .env files:

• .env
• .env.development
• .env.production

ESLint

ESLint is configured in the .eslintrc file.

Prettier

Prettier is configured in the .prettierrc file.

License

This project is licensed under the MIT License.