benits / boilerplate-webpack-5

Customizable Boilerplate using Webpack 5, Babel, PostCSS and Sass with an active development server and an optimized production build.

Welcome to webpack-boilerplate 👋

Customizable Boilerplate using Webpack 5, Babel, PostCSS and Sass with an active development server and an optimized production build.

Install

npm install

Usage

Development server

yarn start

You can view the development server at localhost:3000.

You can view the bundle Analyzer server at http://127.0.0.1:8888.

Production build

yarn build

Note: Install http-server globally to deploy a simple server.

npm i -g http-server

You can view the deploy by creating a server in dist.

cd dist && http-server

Features

• webpack
• Babel
• Sass
• PostCSS
• ESlint-(airbnb)
• Prettier
• Husky - pre-commit

Dependencies

webpack

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server for webpack
• webpack-merge - Simplify development/production configuration
• cross-env - Cross platform configuration

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/plugin-proposal-class-properties - Use properties directly on a class (an example Babel config)
• @babel/preset-env - Smart defaults for Babel

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
  • node-sass - Node Sass
• postcss-loader - Process CSS with PostCSS
  • postcss-preset-env - Sensible defaults for PostCSS
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM

Plugins

• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files
• optimize-css-assets-webpack-plugin - Optimize and minimize CSS assets
• terser-webpack-plugin - Optimize and minimize JavaScript

Authors

👤 Matheus Benites

• Website: Blog
• Twitter: @papoddev
• Github: @benits
• LinkedIn: @benites-amorim

👤 Uellington Palma

• Twitter: @uell_palma
• Github: @uellpalma
• LinkedIn: @uell-palma

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

---