Webpack 4 Boilerplate

Features

• Simple setup instructions
  • Start development of a project right away with simple, configured, browser synced, linter monitored asset files.
• Integration with Travis CI
  • Demo deployment available to github pages
• Example 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 : ^10 || ^12 || >=14
• npm

Setup

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 here npm ci

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

Define Package Metadata

• Amend package.json file 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
  • You can either use the default built-in internal serving capabilities of browser-sync package or configure to use an external already running server of your existing web back-end powered application.

const serverConfiguration = {
  internal: {
    server: {
      baseDir: 'dist',
    },
    port: 3000,
  },
  external: {
    proxy: 'http://localhost:9000/path/to/project/',
  },
};

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

BrowserSync UI can be reached by default on this location: http://localhost:3001

Enable Source Files Watcher Using an Existing Webserver

$ npm run watch:externalServer

Configure the URL to your running external web server in the webpack.config.json project under:

const serverConfiguration = {
  // ...,
  external: {
    proxy: 'http://localhost:3000/path/to/project/',
  },
};

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

Bundle (using external server for preview)

Executes both install and watch:externalServer tasks in a single command convenient for development with existing webserver back-end powered application:

$ npm run bundle:externalServer

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

Continuous Integration

This boilerplate template contains integration with Travis CI. The build system runs all linting scripts and deploys production optimized pages to GitHub pages upon push to the master branch. However, note that this deployment flow only works for Project Pages, as User and Organization pages only support the master branch flow.

For more information on how to set up alternative deployment processes, check out the Travis CI documentation on deployment. The service can deploy to dozens of cloud providers, including Heroku, AWS, and Firebase.