Skip to content

itsabdessalam/webpack-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

51 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

webpack-boilerplate

Webpack Boilerplate

This starter project aims to be more productive when starting a webpack project.

Requirements

This starter project should be working as expected with the following minimal version of:

Dependency Version
Node >= v8.0.0
NPM >= v5.0.0

πŸš€ Quick start

  1. Clone the git repository
# cloning git repository into `my-webpack-starter` folder
git clone https://github.com/Abdessalam98/webpack-boilerplate my-webpack-starter

# install project dependencies
cd my-webpack-starter && npm install
  1. Start Developing

Dev Version

npm run dev

Prod Version

npm run prod
  1. Open browser and start editing files!

Site is running at http://localhost:9000

🧐 What's inside?

.
β”œβ”€β”€ node_modules        # This is the directory of the modules (npm packages) for your project
β”œβ”€β”€ config              # Config files
|   β”œβ”€β”€ index.js
|   β”œβ”€β”€ dev.js
|   └── prod.js
β”œβ”€β”€ build               # Webpack configuration files
|   β”œβ”€β”€ webpack.common.js
|   β”œβ”€β”€ webpack.dev.js
|   └── webpack.prod.js
β”œβ”€β”€ src                 # This is the directory of entry point files related to the front-end of your site
|   β”œβ”€β”€ index.js        # This is the entry point file for Webpack
|   └── assets
|       β”œβ”€β”€ fonts
|       β”œβ”€β”€ images
|       β”œβ”€β”€ javascripts
|       └── stylesheets
β”œβ”€β”€ .gitignore          # This file tells git which files it should not track
β”œβ”€β”€ .prettierrc.json    # This is the configuration file for Prettier
β”œβ”€β”€ .eslintrc.json      # This is the configuration file for ESLint
β”œβ”€β”€ .stylelintrc.json   # This is the configuration file for stylelint
β”œβ”€β”€ commitlint.config.js # This is the configuration file for commitlint
β”œβ”€β”€ index.html          # This is the file where Webpack serve content
β”œβ”€β”€ package.json        # This file tells npm which packages to install for your project
β”œβ”€β”€ README.md
└── LICENSE

✨ Features

  • Babel
  • Linting with ESLint and Stylelint
  • Code formatting with Prettier
  • Precommit with husky and lint-staged
  • Commit conventions with commitlint

πŸ’© When trying to commit bad code

It runs linters before committing and prevents errors to go in your repository.

Example with errors

preview-precommit-errors

Example after fixing errors

preview-precommit-errors-resolved

Author

Abdessalam BENHARIRA