frontend-boilerplate

An ES201X starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.

For an older version with Gulp 4, see 1.6.2.

Setup

Node ">=6.0.0" (use brew or install it from here)

brew install node

OSX & Linux:

git clone --depth 1 https://github.com/dmnsgn/frontend-boilerplate.git && cd frontend-boilerplate && rm -rf .git && git init

Windows:

git clone --depth 1 https://github.com/dmnsgn/frontend-boilerplate.git && cd frontend-boilerplate && rd /s /q .git && git init

npm install

Open config/config.js:

Key	Description	Type
PATHS	map of paths to the differents folders needed by `webpack` and `npm scripts`	Map
BROWSERS	the browsers targeted for `babel-preset-env` and `autoprefixer` (see full list here)	Array

Open package.json:

Key	Description	Type
config.title	title used for metas and favicons	String
config.url	absolute url used for metas, robotstxt, sitemap and banner	String
config.lang	language for index.html and favicons	String
config.description	title used for metas, favicons and banner	String
config.copyright	license acronym used for banner	String
config.handle	twitter handle for metas	String
config.analyticsUA	google analytics UA	String
author.name	author name used for favicons	String
author.url	author url used for favicons	String

npm run dev
// or npm start

npm run prod
// or npm run build

DefinePlugin: create global constants which can be configured at compile time
HotModuleReplacementPlugin: enable Hot Module Replacement
HtmlWebpackPlugin with Lodash templates: simplify creation of HTML files
MiniCssExtractPlugin: lightweight CSS extraction plugin
SpritesmithPlugin: convert a set of images into a spritesheet and SASS/LESS/Stylus mixins
BannerPlugin: add a banner to the top of each generated chunk.
WebpackStatsPlugin: ingest the webpack stats object, process / transform the object and write out to a file for further consumption.