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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
src Use prettier for html May 22, 2019
.editorconfig
.gitignore
README.md
package-lock.json
package.json
tsconfig.json

README.md

frontend-boilerplate

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%.

Setup

Requirements

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

brew install node

Clone the repository

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

Dependencies

npm install

Configuration

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

Develop

npm run dev
// or npm start

Production

npm run prod
// or npm run build

Features

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

Licence

MIT

You can’t perform that action at this time.