An ES20XX starter with common frontend tasks using Webpack 5 as module bundler and npm scripts as task runner.
An ES20XX starter with common frontend tasks using Webpack 5 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 ">=15.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 different folders needed by webpack and npm scripts
|
Map |
BROWSERS | the browsers targeted for babel-preset-env and browserslist (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.imageWidth | width of the share image (default ${PACKAGE.config.url}/share.jpg ) |
String |
config.imageHeight | height of the share image (default ${PACKAGE.config.url}/share.jpg ) |
String |
config.type | Open Graph type | String |
config.card | Twitter card | String |
config.copyright | license acronym used for banner | String |
config.handle | twitter handle for metas | String |
config.analyticsUA | google analytics UA | String |
config.pages | list of pages with id and optional name, description, EJS template for HtmlWebpackPlugin | Array |
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
<picture>
wrapping using posthtml, optimised with image-webpack-loader
npm run clean
: remove all the files from the dist
directorynpm run favicons
: generate favicons files and /src/templates/_favicons.ejs
npm run robotstxt
: generate robots.txt filenpm run sitemap
: generate sitemap.xml fileMIT