Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evrendev/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.
https://github.com/evrendev/webpack-starter
babel boilerplate eslint javascript live-server prettier scss webpack
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/evrendev/webpack-starter
- Owner: evrendev
- Created: 2024-10-24T09:37:01.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T16:30:40.000Z (3 months ago)
- Last Synced: 2024-10-25T07:31:08.844Z (3 months ago)
- Topics: babel, boilerplate, eslint, javascript, live-server, prettier, scss, webpack
- Language: SCSS
- Homepage:
- Size: 18.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```bash
.
├── .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](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
### Installation
1. Clone the repository:
```sh
git clone https://github.com/evrendev/webpack-starter
```
2. Navigate to the project directory:
```sh
cd webpack-starter
```
3. Install the dependencies:
```sh
npm install
```
### Development
To start the development server, run:
```sh
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:
```sh
npm run build:prod
```
The built files will be output to the `dist` directory.
## Project Configuration
### Babel
Babel is configured in the [`.babelrc`](.babelrc) file.
### Environment Variables
Environment variables are managed using `.env` files:
- [`.env`](.env)
- [`.env.development`](.env.development)
- [`.env.production`](.env.production)
### ESLint
ESLint is configured in the [`.eslintrc`](.eslintrc) file.
### Prettier
Prettier is configured in the [`.prettierrc`](.prettierrc) file.
## License
This project is licensed under the MIT License.