Modern Workflow Boilerplate

A morden workflow boilerplate composed of Babel (for ES6 Javascript) and PostCSS (PreCSS for next-generation CSS) and optimisation tools. Perfect for simple landing page or test projects. Just clone and run it! - Build on Webpack 4.

Feature list

Development features

Development features are composed of modules that are used during the production of the web page. They don't appear on the final result.

Hot reloading and module replacement

Supported by Webpack Dev Server and Webpack.

ES6 JavaScript

Supported by Babel and Babel Polyfill.

Future CSS

Supported by CSSNext and PostCSS.

CSS @import rule and url() rendering

Supported by CSS Imports, CSS Loader and PostCSS.

CSS grid system

Supported by Bootstrap, Lost Grid and PostCSS.
Note that Bootstrap was directly included in the HTML Bootstrap CDN in a <link />. - Use service workers to include CDN files in bigger projects.

Ditribution files' cleaning

Supported by Clean Webpack Plugin.

Error Reporting (Web console)

Supported by Error Overlay Webpack Plugin and Webpack.

Production features

Production features are composed of modules that determine in which form the final code will be rendered.

JavaScript minification and optimization

Supported by UglifyJS Webpack Plugin and Webpack.

CSS minification and optimization

Supported by CSSNano (advanced preset) and CSS MQPacker and PostCSS.

CSS Normalization and base

Supported by Bootstrap and Normalize.css (included in Bootstrap).

HTML minification

Supported by HTML Webpack Plugin.

Loaders

Loaders are modules that help Webpack process the code and assets to build them for production. Webpack is able to process and optimize JavaScript and JSON files on its own, but for any other tasks, it needs the help of independant loaders.

Webpack

Load JavaScript files for production.

Babel Loader

Allows Webpack to transpile ES6 JavaScript into ES5 Javascript.

Style Loader, CSS Loader and PostCSS Loader

Allows Webpack to process @import rules and url() function in CSS files modified with PostCSS. The style is finally rendered at the head of the page.

HTML Loader

Allows Webpack process to HTML files and create the HTML production files.

File Loader

Allows Webpack process static files like images and font files.