This project will help you bootstrap a JavaScript oriented using webpack. It has support for SASS or CSS fast. Currently, it using Webpack 5. See the features section below.
Here are the reasons you will love this boilerplate:
-
Webpack 5 - Modern bundling & build process
-
SASS/SCSS - Dart-Sass - The famous CSS on steroids
-
For SASS, the project uses 7-1 architecture pattern and sticking to Sass Guidelines writing conventions.
- Each folder of this project has its own
README.md
file to explain the purpose and add extra information. Be sure to browse the repository to see how it works(This folder structure of the acheitecture pattern is maintained by Kitty Giraudel Here.
- Each folder of this project has its own
-
MULTI-PAGES SUPPORT - now the boilerplate can allow you to build multipages application separately without building a separate development environment.
- You add /pages folder in the /src path. You also have to add separate javascript entry file with a similar name to your page folder in each root directory of your page.i.e. if developing a home page under the path src/pages/homepage, use the name homepage.js (src/pages/homepage/homepage.js) as your entry file. In this case, you don't have to name your html as homepage.html, you can name it as index.html.
- Also, you don't have to put your different pages in different folders. You can put your files in the root directory of your pages path (folder), .i.e. src/pages/homepage.html src/pages/homepage.js.
- If you decide to go with the folder structure to represent your different pages, you can put your assets, scripts, and styles folders inside your pages folder. However, currently the boiler plate does not support recursive pages - like pages within pages. It simply allow you only one level deep nesting.
- On performance, unfortunate, in each request, you will have a full page refresh to the server.
- As a results, this is not a single page application builder like React, it is far from that. But if you are looking to build a multi-pages app with JavaScript and CSS, this Webpack boilerplate will really simplify your work.
-
Autoprefixing - Automatically adds vendors prefixes to your CSS
-
Babel Support - Write JS using ES2015+ and webpack will make it work across all browsers. Support of class properties is enabled too.
-
Minify - Automatically minifies JS and CSS during production mode
-
DevServer - Use both default dev server
webpack server
and pretty output on the console usingwebpack-dashboard
-
Use any styling you want - You can use both CSS or SASS, no limitation.
-
Separate your vendors from your code - you don't like mixing your code with 3rd party's? Then this is your solution(Your vendor's entry name is called vendor.js).
-
Remove Unused Styles - Purify CSS/SCSS output using
purgecss-webpack-plugin
for your final build. -
Support for JavaScript, CSS, & SASS Source Maps.
- Nodejs
- Clone this repo or download the latest release. Rename it to whichever project name you want.
cd <project name>
- Run
npm install
- YOU ARE READY TO GO
npm start
- start development mode with dev-servernpm run smart:start
- start development with dev-server and dashboard enabled on your console.npm run dev
- start development mode without dev-servernpm run build
- start production mode
βββ Public/ # Distribution files
βββ src/ # Source files
| |
| βββ App/
| | βββ assets/ # Assets directory
β | β βββ images/ # Image directory
β | | βββ fonts/ # Fonts directory
β | βββ styles/ # SCSS files
| | β βββ dirs/ # SCSS directories (Follows 7-1 architecture pattern)
β | βββ scrips/ # JS files
| | βββ helpers/ # Helper Scripts related to your app .i.e. consoleSeparator()
β | |ββ vendors/ # 3rd Party Scripts index (Vendors)
β | | βββ 3rd-party-scrips/ # All Vendors
| | βββ app.js
β βββ pages/ # Optional pages folder (Put your website different pages here)
β βββ index.js # Load SCSS and JS
β βββ index.html # The default template for the website
βββ webpack/ # Webpack configuration files
β βββ webpack.common.js # Common config used both in development and production mode
β βββ webpack.dev.js # Development mode config
β βββ webpack.prod.js # Production mode config
βββ .babelrc # Babel config file
βββ .gitignore # Git ignored files
βββ LICENSE # License agreements
βββ postcss.config.js # Post CSS configuration file. (Adds autoprefixing support)
βββ README.md # You are reading this
βββ webpack.config.js # Webpack entry config file