ammoradi/frontend-webpack-boilerplate

Webpack based boilerplate with SASS and babel ES6/7 support.

Webpack 4 Boilerplate

Features

• Simple setup instructions
  • Start development of a project right away with simple, configured, browser synced, linter monitored asset files.
• Starter assets directory for reference and demo building of:
  • JavaScript
  • SASS
  • Images
  • Fonts
• Support for assets optimization for production:
  • Minification of JavaScript and CSS files.
  • Inline images / fonts files having file size below a configurable threshold value.
• Code style and formatting linters configuration and setup for:
  • SASS
  • JavaScript
• Latest Webpack 4 - JavaScript module bundler.
• Latest SASS/CSS compiler based on node-sass which provides bindings to libsass.
• Latest Babel 7 (@babel/core) - JavaScript compiler - Use next generation JavaScript, today.
• Configured and ready to use BrowserSync plugin - browser-sync-webpack-plugin

Requirements

• node >= 8.9.0
• npm

Setup

Initial Installation

1. Choose and download the template from List of Releases.
2. Extract the release archive to a new directory, rename it to your project name and browse the directory.
3. Install all dependencies using npm clean install.

$ npm ci

More on the clean install npm command can be read yere npm ci

You can still use npm install in cases the npm ci raises system error due to specific platfrom incompatibilities.

Define Package Metadata

• Amend package.json and optionally specify:

  • name - Name of your project. A name can be optionally prefixed by a scope, e.g. @myorg/mypackage.
  • version - Specify and maintain a version number indicator for your project code.
  • author - Your organisation or just yourself. You can also specify contributors.
  • description - Short description of your project.
  • keywords - Put keywords in it. It’s an array of strings.
  • repository - Specify the place where your code lives.
  • license - Announce your code license, figure out the license from Choose an Open Source License .
  • engines - Specify the version of node that your stuff works on.

• Configure webpack.config.js

  • Edit the configuration of the local web server path to your project location.

  Note this development server should be already started, currently this package does not include web server

const localServer = {
  path: 'localhost/',
  port: 3000
};

Development / Build Assets

Assets Source

• SASS files are located under /src/scss/
• JavaScript files with support of ES6 / ECMAScript 2016(ES7) files are located under /src/js/
• Image files are located under /src/images/
• Font files are located under /src/fonts/
• HTML files are located under /src/

Build assets

$ npm run build

Enable source files watcher

$ npm run watch

Define any other files that needs syncing in files:[] section under BrowserSyncPlugin in webpack.config.js

Note: Watching does not work with NFS (Windows) and machines in VirtualBox. Extend the configuration in such cases by:

module.exports = {
  //...
  watchOptions: {
    poll: 1000 // Check for changes every second
  }
};

Bundle

Executes both install and watch tasks in a single command convenient for development:

$ npm run bundle

Production / Build Assets

• Optimize assets for production by:

$ npm run production

Processed built assets

• CSS files are located under /dist/css/
• JavaScript files with support of ES6 / ECMAScript 2016(ES7) files are located under /dist/js/
• Images are located under /dist/images/
  • Images part of the design (usually referenced in the CSS) are located under /dist/images/design/
  • Images part of the content (usually referenced via <img> tags) are located under /dist/images/content/
• Fonts are located under /dist/fonts/
• HTML files are located under /dist/

Run Code Style Linters

• SASS

$ npm run lint-sass

• JS

$ npm run lint-js