Skip to content
This repository has been archived by the owner on Mar 5, 2021. It is now read-only.

Create pretty applications based on latest Babel and PostCSS/SASS

License

Notifications You must be signed in to change notification settings

MikeLP/webpack2-boilerplate

Repository files navigation

Webpack2 (Babel) Boilerplate

Create pretty applications based on latest Babel and PostCSS/SASS

Getting Started

Lets install dependencies:

$ npm install

..or if you know about yarn

$ yarn

P.S. You'll need to have Node >= 6 on your machine.

Creating an App

Inside that directory, it will contain the initial project structure

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  .babelrc
  .eslintrc
  public/
    favicon.ico
    index.html
  src/
     app/
      components/
        myComponent/
         index.js
         style.scss
     assets/
     images/
       example.png
       example2.jpg
     css/
       main.scss
     fonts/
       font.woff
       font.woff2
     index.js

$ npm start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will see the build errors and lint warnings in the console.

$ npm run build

Builds the app for production to the build folder.
It correctly bundles in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

$ npm run start:prod

Starts production example server that looking on build folder. The build is minified and the filenames include the hashes.

Open http://localhost:9000 to view it in the browser.

CSS3 (SCSS) usage

// Feel free to use variables
$red: #ff1700;
$white: '#fff';


.test {
    background-color: $red;
    background-image: url('./cat.jpg');
    // Will be transformed automaticly by autoprefixer
    display: flex;
}

.myClass {
    border-radius: 10px;

    .myClass2 {
        color: $white;
    }
}

JS (ES7) usage

Component example:

 components/
   Button/
     index.js
     style.scss

index.js

import style from './style.scss'

const {myClass, myClass2} = style

const template = `<div class="${myClass}"><span class="${myClass2}"></span></div>`

export default {
  template
}

About

Create pretty applications based on latest Babel and PostCSS/SASS

Resources

License

Stars

Watchers

Forks

Packages

No packages published