frontend-boilerplate
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
loaders
Webpack- Babel with preset-env and TypeScript
- PostCSS: see postcss.config.js
- Sass
- Less
- Stylus
- fonts via file-loader
- images via file-loader and optimised with image-webpack-loader
- svg via file-loader and optimised with svgo-loader
- html-loader
- ejs-loader
- glslify
plugins
Webpack- 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 thedist
directorynpm run favicons
: generate favicons files and/src/templates/_favicons.ejs
npm run robotstxt
: generate robots.txt filenpm run sitemap
: generate sitemap.xml file
formatter
PrettierLicence
MIT