timothyguo86 / webpack-starter

A foundational webpack setup for frontend project.

Webpack Starter

A clean foundational setup for your upcoming frontend project built on Webpack.

Table of Contents

• Overview
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Scripts
• Running Tests
• Linting
• Webpack Configuration
• Browser Support
• IDE Configuration
• Built With
• Features
• Contributing
• License

Overview

This starter kit provides a foundational setup for your frontend projects using Webpack. It includes configurations for development and production builds, as well as linting and testing setups.

Getting Started

Prerequisites

Ensure you have Node.js and npm installed on your machine.

Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install

Usage

• Development Server(with Hot Module Replacement)

This script starts the webpack development server with Hot Module Replacement (HMR), allowing you to see changes in real-time without a full page reload. It also includes an inline source map for easier debugging.

npm run dev

• Build for Production:

This script builds your project for production, optimizing and minifying the code.

npm run build

Running Tests

This script runs Jest tests. Jest is configured to handle stylesheets through identity-obj-proxy and use babel-jest for JavaScript.

npm run test

Linting

This script runs ESLint to lint your JavaScript files in the src directory and automatically fixes fixable issues. The default eslint configuration is based on Airbnb's JS config with tweaks defined in the .eslintrc.

npm run lint

Prepare

This script was initially setup for installing the husky and lint-staged. It sets up the .husky directory, which you can ignore. When you run git commit -m <message>, Husky executes the .husky/pre-commit script through lint-staged. This ensures linting and other tasks are performed on staged git files before committing.

npm run prepare

Webpack Configuration

This repository includes three webpack configuration files:

• webpack.dev.js: Configuration for local development.
• webpack.prod.js: Configuration for production.
• webpack.common.js: Shared configuration between webpack.dev.js and webpack.prod.js.

Feel free to customize these files based on your project requirements.

Browser Support

Modify the .browserslistrc queries, e.g., last 2 versions, to ensure compatibility with Babel and PostCSS bundling configurations.

IDE Configuration

Modify .editorconfig to maintain consistent coding styles for multiple developers working on the same project across various IDEs.

Built With

• Webpack - Module bundler.
• Babel - JavaScript compiler.
• Jest - JavaScript testing framework.
• ESLint - JavaScript linting utility.
• Prettier - Code formatter.
• PostCSS - CSS tooling.
• SASS - CSS preprocessor.
• Autoprefixer - CSS Vendor Prefixes.
• CSSnano - CSS Minification Tool
• Husky - Git hooks.
• Lint-staged - Pre-commit hooks.
• modern-normalize - Normalize browsers' default style.

Features

• Cache Management and Performance Boost:

The build hashes the bundled _.css and _.js files, ensuring that the browser fetches the latest version whenever their content changes. This enhances cache management and website performance by efficiently handling file updates.

• Modern Normalize:

Utilizes modern-normalize, a modern alternative to traditional CSS resets or normalizations, ensuring consistent rendering across different browsers while maintaining a modern and clean baseline for styling. You can import the modern-normalize CSS file into your main.scss using the following directive:

// main.scss

// Import modern-normalize
@import 'modern-normalize/modern-normalize.css';

// Your other SCSS styles here

Contributing

Feel free to contribute by opening issues or submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.