This boilerplate provides a robust starting point for modern web applications using Webpack. It integrates a suite of tools for managing, building, and deploying both JavaScript and TypeScript-based projects with ease.
- Webpack 5: Optimized build and development configuration.
- Babel: Modern JavaScript compatibility.
- PostCSS & SASS: Enhanced styling capabilities with autoprefixing.
- Linting Tools: ESLint, Prettier, and Stylelint for a clean and consistent codebase.
- Semantic Release: Automate versioning and changelog generation.
- Commitizen: Standardized commit messages.
- TypeScript Support: Easily build and maintain type-safe applications.
This project integrates the following tools to ensure scalability and maintainability:
| Tool | Purpose |
|---|---|
| Webpack | Bundling JavaScript, styles, and assets. |
| Babel | JavaScript transpilation for broad browser support. |
| PostCSS | Processing and optimizing CSS. |
| Yarn | Dependency management. |
| Commitizen | Interactive and structured commit messages. |
| Commitlint | Enforcing commit message conventions. |
| ESLint | JavaScript linting and code quality. |
| Prettier | Automatic code formatting. |
| Stylelint | CSS/SCSS linting. |
| Husky | Managing Git hooks for pre-commit and commit-msg actions. |
| Lint-staged | Running linters on staged files during commits. |
| Semantic Release | Automating releases and changelogs. |
| TypeScript | Adding static typing to JavaScript. |
Follow these steps to set up the project:
- Node.js (v16+ recommended)
- Yarn (v1.22.22)
-
Clone the repository:
git clone https://github.com/yourusername/your-repo.git cd your-repo -
Install dependencies:
yarn install
-
Start the development server:
yarn serve
-
Build the project:
yarn build
-
Add the following folders and files in
src:src/ ├── index.html ├── scripts/ │ └── index.js └── styles/ └── main.scss -
Populate files:
index.html:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webpack Boilerplate</title> </head> <body> <h1>Hello, Webpack!</h1> <script src="./main.js"></script> </body> </html>
scripts/index.js:console.log('Hello, Webpack!');
styles/main.scss:body { font-family: Arial, sans-serif; }
-
Run the development server:
yarn serve
-
Build for production:
yarn build
Use cz commit to add standardized commits:
cz commitAutomate versioning and changelog:
yarn release- Netlify: Drag the
distfolder to Netlify's UI or use CLI. - Vercel: Run
vercel deployfrom the project directory.
- Ensure
ts-loaderandtypescriptare installed. - Rename
index.jstoindex.ts. - Update Webpack
entrylogic to prioritize.tsfiles.
Run TypeScript compilation checks:
yarn lint-staged| Command | Description |
|---|---|
yarn serve |
Start the development server. |
yarn build |
Create a production build. |
yarn build:dev |
Create a development build. |
yarn watch |
Watch for file changes and rebuild. |
yarn release |
Automate semantic versioning. |
Contributions are welcome! Feel free to submit a pull request or open an issue.
This project is licensed under the ISC License. See the LICENSE file for details.