Webpack 2 - Yarn - Sass - ES6 Boilerplate

This is a Webpack 2, ES6 & PostCSS boilerplate that utilizes some of the latest open source tools around such as:

• Node.js
• Yarn
• Webpack 2
• Babel (ES6) transpiling
• ESLint for linting
• PostCSS w/ cssnext
• Sass
• ...and more

This boilerplate is intended to be small in scope so that it can be easily extended and customized, or used as a learning tool for folks who are trying to become familiar with Webpack 2.

license

This boilerplate is fully open source and public domain, so you are free to do whatever you wish with it -- commercially or personally.

getting started

After completing the steps below, you will be ready to begin using Starbase:

1. Install Node.js (latest LTS recommended)
2. Install Yarn
3. Clone this repository into your project root directory
4. Install dependencies by running yarn in your project root directory

Note: if you hate Yarn for some reason, you can skip Step 2 and use npm install instead of yarn in Step 4.

building, watching & developing

local development

This boilerplate uses webpack-dev-server to serve up your project at http://localhost:8080 for streamlined and convenient development.

After running yarn run dev in the project root, your /src code will be served at the url above and watched for changes. As you modify code in /src, the project will be recompiled and your browser will refresh to show the latest changes.

cd /path/to/repo
yarn run dev

building for production

Use yarn run build in your project root to run a production build.

Production builds compile & minify your assets into /dist for distribution and/or integration into whatever codebase you'll be using these assets in.

cd /path/to/repo
yarn run build

features you may want to remove

Sass

This project uses Sass, if you prefer Less or just plain old css you can remve it from the project.

1. Change test: /\.sass$/ in both /webpack/webpack.config.prod.js and /webpack/webpack.config.dev.js to test: /\.css$/ or your choice of file extension.
2. Remove sass-loader from both /webpack/webpack.config.prod.js and /webpack/webpack.config.dev.js
3. Run yarn remove node-sass sass-loader dependency from /package.json

features you may want to customize

javascript linting

This project uses ESLint for Javascript (ES6) linting. The config (/.eslintrc) included out of the box is based on the create-react-app file. It is focused on warnings and do not include any plugins. I recommend modifying this to your liking. Check out the official docs for more information.