Skip to content

A boilerplate to start up your web development faster and easier. πŸš€ (Webpack 4 + HTML + SASS + Babel + ES6 + Livereload)

License

Notifications You must be signed in to change notification settings

Wangchimei/boilerplate-webpack-scss-babel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

23 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Webpack 4 Boilerplate with SASS, Babel, HTML

npm version

A boilerplate to start up your web development faster and easier. πŸš€
(Webpack 4 + HTML + SASS + Babel + ES6 + Livereload)

Requirements

node.js needs to be installed.

Feature

  • Support Livereload
  • Support syntax ES2015+
  • Support browser cache busting on production mode
  • Minify HTML and CSS on production mode
  • Two settings for development mode and production mode

List of Packages and Modules

  • Webpack v4.42.0
  • Webpack Dev Server v3.10.3
  • Babel(Core) v7.8.7
  • Babel Loader v8.0.6
  • HTML Loader v0.5.5
  • CSS Loader v3.4.2
  • Sass Loader v8.0.2
  • Style Loader v1.1.3
  • File Loader v5.1.0
  • HTML Webpack Plugin v3.2.0
  • Mini CSS Extract Plugin v0.9.0
  • Clean Webpack Plugin v3.0.0

File Structures

.
β”œβ”€β”€ dist                     # Generated files
β”‚   β”œβ”€β”€ development
β”‚   └── production
β”œβ”€β”€ src                      # Source files
β”‚   β”œβ”€β”€ images
β”‚   β”œβ”€β”€ scripts
β”‚   β”œβ”€β”€ styles
β”‚   β”‚   β”œβ”€β”€ partials
β”‚   β”‚   └── main.scss
β”‚   β”œβ”€β”€ index.js
β”‚   β”œβ”€β”€ template.html
β”‚   └── vendor.js            # For all vendor js
β”œβ”€β”€ webpack                  # Webpack config files
β”‚   β”œβ”€β”€ webpack.common.js
β”‚   β”œβ”€β”€ webpack.dev.js
β”‚   └── webpack.prod.js
└── ...

How to Start

You can start using this repo through

  1. Download

  2. Git

    • First, make sure you are in the new project file your created.
    • If you have not yet Initialized
      git init
      
    • Add this repo to git remote
      git remote add boilerplate git@github.com:Wangchimei/boilerplate-webpack-scss-babel.git
      
    • Pull the repo to your local directory
      git pull boilerplate master
      
    • Remove this remote URL from your repository
      git remote rm boilerplate
      

After you successfully download or pull from this repo

  • Install the dependencies

    npm install
    

Usage

Start a live reloading server in development

npm run serve

Build an application

  • For development
    npm run build:dev
    
  • For production
    npm run build
    
    or
    npm run build:prod
    

Remove files

  • Remove development files
    npm run clear:dev
    
  • Remove production files
    npm run clear:prod
    
  • Remove both development and production files
    npm run clear
    
  • Remove node_modules, development and production files
    npm run clear:all
    

Install Bootstrap on the fly

  • Only import Bootstrap CSS styles

    npm run set:bs:css
    

    Go to main.scss and import Bootstrap

    @import '~bootstrap';
    
  • Bootstrap + jQuery + Popper.js

    npm run set:bs:all
    

    Go to main.scss and import Bootstrap

    @import '~bootstrap';
    

    Go to vendor.js and import Bootstrap

    import 'bootstrap';
    

    Note: if you are okay with mixing your own js code with js from vendors, it is fine to put in index.js

    By running the commands above, you will install:

    • Bootstrap v4.4.1
    • jquery v3.4.1
    • popper.js v1.16.1

Uninstall Bootstrap / jQuery / Popper.js

npm run bs:clear

License

MIT

About

A boilerplate to start up your web development faster and easier. πŸš€ (Webpack 4 + HTML + SASS + Babel + ES6 + Livereload)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published