https://github.com/leandroberlin/webpack5-boilerplate
🔥 Webpack 5 setup with Babel, SCSS-CSS support, html creation and linking, file import for images, webpack aliasis, Bootstrap, FontAwesome, BrowserSync and Github Pages publishing
https://github.com/leandroberlin/webpack5-boilerplate
Last synced: 3 months ago
JSON representation
🔥 Webpack 5 setup with Babel, SCSS-CSS support, html creation and linking, file import for images, webpack aliasis, Bootstrap, FontAwesome, BrowserSync and Github Pages publishing
- Host: GitHub
- URL: https://github.com/leandroberlin/webpack5-boilerplate
- Owner: LeandroBerlin
- License: mit
- Created: 2021-04-15T17:52:12.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-12T21:32:36.000Z (over 3 years ago)
- Last Synced: 2025-01-19T10:08:57.477Z (5 months ago)
- Language: JavaScript
- Homepage: https://leandroberlin.github.io/webpack5-boilerplate/
- Size: 1.74 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Webpack Boilerplate
 
[](LICENSE)
A [Webpack 5](https://webpack.js.org/) boilerplate with build-in:
- creation of HTML files to serve your webpack bundles using [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
- ECMAScript 6 to ECMAScript 5 transpiling with [babel](https://babeljs.io/)
- CSS extraction into a single file using [style-loader](https://github.com/webpack-contrib/style-loader), [css-loader](https://github.com/webpack-contrib/css-loader) and [css-mini-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)
- SCSS support using [sass-loader](https://github.com/webpack-contrib/sass-loader) and [node-sass](https://github.com/sass/node-sass).
- Images import with [file-loader](https://github.com/webpack-contrib/file-loader)
- [Bootstrap](https://getbootstrap.com/) SCSS and [Fontawesome](https://fontawesome.com) local fonts support
- Github Pages publishing using [gh-pages](https://www.npmjs.com/package/gh-pages)
- Use aliases for easy imports
- [BrowserSync](https://www.browsersync.io/) integration
- [ESlint](https://eslint.org/) linting
[DEMO](https://leandroberlin.github.io/webpack5-boilerplate/)
## Get Started
- [Project Structure](#project-structure)
- [Commands](#commands)
- [Development](#development)
- [Production](#production)
- [Deploy to Github Pages](#deploy-to-github-pages)
- [Setup](#setup)
- [Quick setup](#quick-setup)
## Project Structure
```
Project
│
│ README.md
│ package.json
│ webpack.config.js
└───src
│ │ index.html
│ │
│ └───assets
│ └───js
│ └───index.js
│ └───scss
│ └───styles.scss
│ └───img
│ └───logo.png
│
└───dist
```
### Commands
#### Development
Run **Webpack** in **Development** mode and start coding!
```
npm run dev
```
#### Production
Run **Webpack** in **Production** mode.
```
npm run build
```
#### Deploy to Github Pages
Deploy your code to **Github Pages**: this script creates a 'gh-pages' branch and serve the production bundle to this branch (ie. [https://leandroberlin.github.io/webpack5-boilerplate/](https://leandroberlin.github.io/webpack5-boilerplate/))
```
npm deploy
```
## Setup
### Quick setup
Create a directory for your new project, clone this repository, install the required modules and start coding!
```
mkdir myNewProject && cd myNewProject
clone https://leandroberlin.github.io/webpack5-boilerplate/.
npm i
npm run dev
```
***
### Credits
Based on my previous [webpack4-boilerplate](https://github.com/LeandroDCI/webpack4-boilerplate/)
Quality metadata badges from [shields.io](https://shields.io)
Background image from [thepatternlibrary](http://thepatternlibrary.com/#fancy-pants)