Skip to content
An ES201X starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Use prettier for html May 22, 2019


styled with prettier

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

If you serve your files over HTTPS with HTTP/2, use compression (gzip, brotli...) for text-based resources, and respect accessibility rules, your lighthouse score will be 100%.



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

brew install node

Clone the repository

OSX & Linux:

git clone --depth 1 && cd frontend-boilerplate && rm -rf .git && git init


git clone --depth 1 && 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 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


Webpack loaders

Webpack plugins

  • 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
  • CompressionPlugin: Prepare compressed versions of assets to serve them with Content-Encoding (default to gzip). Requires server configuration so it is commented here
  • OfflinePlugin: provide an offline experience using ServiceWorker, and AppCache as a fallback.
  • 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.

npm scripts

  • npm run clean: remove all the files from the dist directory
  • npm run favicons: generate favicons files and /src/templates/_favicons.ejs
  • npm run robotstxt: generate robots.txt file
  • npm run sitemap: generate sitemap.xml file

Prettier formatter



You can’t perform that action at this time.